When a user selects a value in my mat select, it doesn't display well in the selection box.
The text wraps when the selection is opened, but once a choice is made, it gets cut off without proper spacing between the ellipses and the dropdown arrow. This results in the word being partially hidden by the ellipses. Is there a way to improve this appearance, such as dynamically adding ellipses after a complete word?
For example:
Instead of Pizza but this is a lo...
It could be Pizza but this is a ...
or
Hi my name ...
instead of
Hi my name is sta...
<mat-form-field>
<mat-select placeholder="Favorite food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
foods = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza but this is along value that looks bad'},
{value: 'tacos-2', viewValue: 'Tacos'}
];
/** No CSS for this example */
::ng-deep .mat-select-content{
background-color: #fff;
font-size: 1.5em;
}
::ng-deep .mat-select-panel mat-option.mat-option {
margin: 1rem 0;
overflow: visible;
line-height: initial;
word-wrap: break-word;
white-space: pre-wrap;
}
::ng-deep .mat-option-text.mat-option-text {
white-space: normal;
}
EDIT: The provided image highlights the issue I am facing where the word "long" gets cut off. For a better presentation, I want the ellipses to appear after the last complete word in the text.
So it should say Pizza but this is a ...
The current display cuts the word "long" which is not aesthetically pleasing. https://i.stack.imgur.com/EVrlj.png