text-overflow失效

使用场景：用…替换多余的文字

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;

这是为什么呢？

1. 单纯的来看，tr，td既是行内元素也是块级元素。
2. 因为它们可以设置其宽高，但是不能设置其padding。
3. 我们在使用display：block之后相当于将行级元素转化为块级元素，并且为之设置宽度。
4. 因为overflow，text-overflow的使用是相对而言对文本或者区域进行截断和隐藏。