使用场景:用…替换多余的文字
css方法
text-overflow: ellipsis;
overflow:hidden;
white-space: nowrap;
但是在表格中它是不生效的!!!
如果在css方法中添加display:block和固定的宽度就ok!
display: block;
width: 100px;
text-overflow: ellipsis;
overflow:hidden;
white-space: nowrap;
这是为什么呢?
- 单纯的来看,tr,td既是行内元素也是块级元素。
- 因为它们可以设置其宽高,但是不能设置其padding。
- 我们在使用display:block之后相当于将行级元素转化为块级元素,并且为之设置宽度。
- 因为overflow,text-overflow的使用是相对而言对文本或者区域进行截断和隐藏。