Значение выбора матов слишком велико для ввода

Question

У меня есть выбор коврика, и когда пользователь выбирает значение, оно не выглядит хорошо в поле выбора

У меня есть перенос текста, когда пользователь открывает выбор, однако, когда они выбирают выбор, это обрезается без пробела между последними эллипсами и стрелкой раскрывающегося списка, а эллипсы обрезают слово.

Есть ли способ сделать это более профессиональным. Например, динамически добавлять многоточия после целого слова, например

Вместо Пицца, но это просто ...

Это будет Пицца, но это ...
или

Привет, меня зовут ...

вместо

Привет, меня зовут 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;
}

https://stackblitz.com/edit/angular-jhxdfy-2hi8zw?file=app / select-overview-example.ts

EDIT: Вот фотография того, о чем я говорю. Я хочу, чтобы эллипсы отображались после последнего слова.

Значит, должно быть написано «Пицца», но это ...

Изображение разрезает слово «длинный» пополам, а не хорошо выглядеть.

Answer 1

Вот css вашего stackblitz, которые делают всю работу за меня. он добавляет 5 пикселей отступа между стрелкой и многоточием.

::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;
} */

::ng-deep .mat-option-text.mat-option-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

::ng-deep .mat-select-value{
  /* adapt to add space between ellipsis and text */
  padding-right: 5px; 
}

Как видите, я удалил некоторые из ваших css, которые мне не нужны. ! В случае с разделением слов у вас нет возможности сделать это легко. Идея могла бы состоять в том, чтобы построить канал, который обрезал бы ваш текст после последнего пробела, если он слишком длинный, и добавить многоточие (если канал не получит значение после применения css, я не знаю). Честно говоря, тратить на это время не стоит, результат чистый. возможно, отображение всего значения (во всплывающей подсказке тега) может быть еще лучше.