Components: mat-select options are partly hidden if text is too long

[ianfdk]

Bug, feature request, or proposal:

As stated in the title, my mat-select options (I'm using the multiple option in case that matters) have part of their text hidden if being viewed on a small screen.

What would be the correct way to fix this? I guess, ideally, the text would wrap to multiple lines so we can read all of it. Am open to other suggestions too.

What is the expected behavior?

Should be able to see the whole text

What is the current behavior?

Text is cropped with a "..." at the end

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-gtr4uc

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.7
Material 6.4.2

Is there anything else we should know?

At first, I wanted to use a multiple checkboxes type of component and after some research, it seemed that this was the "correct" component for this. I might be wrong though.

[josephperrott]

Closing as this is intended by design as the Material Design spec warns against options whose text goes beyond a single line.

You can however target the option styling to unset the height and white-space:

.mat-select-panel mat-option.mat-option {
  height: unset;
}

.mat-option-text.mat-option-text {
  white-space: normal;
}

[skadav]

try this, its work

.mat-select-panel mat-option.mat-option {
margin: 1rem 0;
overflow: visible;
line-height: initial;
word-wrap: break-word;
white-space: pre-wrap;
}

.mat-option-text.mat-option-text {
white-space: normal;
}

[ReinrodDMD]

Is there a way to know when the text is truncated to enable a tooltip?

Here's what I was testing with:
<mat-option *ngFor="let documentType of documentTypes" [value]="documentType" matTooltip="{{documentType.name}}" matToolTipPosition="after" matTooltipShowDelay="100" matTooltipHideDelay="100"> {{ documentType.name }} </mat-option>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}