Переполнение текста в <mat-table> с помощью display-flex Angular

Question

Я использую Angular-Material mat-table Flex и хотел бы, чтобы дополнительный контент не отображался таким образом.

Вот что у меня есть:

И что я хочу:

Я пытался использовать text-overflow: ellipsis, но это не сработало, если у кого-то была идея, мне интересно.

StackBlitz ЗДЕСЬ

Спасибо

Answer 1

Вы можете поместить текст внутри элемента span:

<mat-cell *matCellDef="let element" fxFlex="50">
  <span class="ellipsis">{{element.weight}}</span>
</mat-cell>

и применить стиль text-overflow к этому элементу:

mat-cell > span.ellipsis {
   text-overflow: ellipsis; 
   overflow: hidden; 
   white-space: nowrap;
}

См. thisstackblitz для демонстрации.