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

有关演示，请参阅此 stackblitz。