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

Question

我使用角材料mat-table Flex，但我不想这样显示多余的内容。

这就是我所拥有的：

还有我想要的：

我尝试使用text-overflow: ellipsis，但如果有人对我有兴趣，那它就不起作用。

StackBlitz HERE

谢谢

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。