text-overflow:ellipsis的那点事儿

项目中关于文本溢出省略号显示的两种解决方案:

1、关于固定宽度的文本折行。

  主要样式:text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 

  一定要指定固定宽度。

2、自适应布局(table)td中文本折行。

  需要给table加上一个样式: table-layout:fixed。

  保证每个td不会随着内容超出td宽度被撑开。

  比如给td设定: 40%。 则需要在td中再多套一层块级元素,比如p,然后给p设置宽度,自适应td的宽度。

  p的样式: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;

     

原文地址:https://www.cnblogs.com/onflying/p/3228299.html