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

Question

我使用 Angular-Material 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 以获取演示。