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的使用是相对而言对文本或者区域进行截断和隐藏。

你可能感兴趣的:(css)