text-overflow:ellipsis的那点事儿

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

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

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

　　一定要指定固定宽度。

2、自适应布局（table）td中文本折行。

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

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

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

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

     

转载于:https://www.cnblogs.com/onflying/p/3228299.html