使用 display-flex Angular <mat-table> 上的文本溢出

Question

我使用Angular-Material mat-table Flex，我希望多余的内容不要这样显示。

这就是我所拥有的：

而我想要的是：

我尝试使用text-overflow: ellipsis，但没有用，如果有人有想法，我很感兴趣。

谢谢

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;
}

有关演示，请参阅 this stackblitz。

Text-overflow on <mat-table> using display-flex Angular