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

Posted 2023-03-06

【中文标题】<mat-table> 上的文本溢出使用 display-flex Angular

【英文标题】：Text-overflow on <mat-table> using display-flex Angular

【发布时间】：2019-10-01 14:59:39

【问题描述】：

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

这就是我所拥有的：

我想要什么：

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

StackBlitz HERE

谢谢

【参考方案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 以获取演示。