CSS-使用display-flex Angular时出现文本溢出

前端之家收集整理的这篇文章主要介绍了CSS-使用display-flex Angular时出现文本溢出 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我使用角材料垫表Flex,并且我希望不要这样显示额外的内容.

那就是我所拥有的:

enter image description here

而我想要的是:

enter image description here

我尝试使用text-overflow:省略号,但是如果有人有想法,这是行不通的,我对此很感兴趣.

StackBlitz HERE

谢谢

最佳答案
您可以将文本放在span元素内:

<mat-cell *matCellDef="let element" fxFlex="50">
  <span class="ellipsis">{{element.weight}}</span>
</mat-cell>

并在该元素上应用文本溢出样式:

mat-cell > span.ellipsis {
   text-overflow: ellipsis; 
   overflow: hidden; 
   white-space: nowrap;
}

演示请参见this stackblitz.

猜你在找的CSS相关文章