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;