css - <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用于演示。