表格中文字过长点点点自适应显示

阅读更多

    这是实际项目中测试提的一个bug，当改变浏览器大小时，里面的文字能自适应td这个单元格出现点点点省略。当浏览器拉长，td随之变长足够显示下文字时，点点点消失。

 

  dom结构: 

   这是一段很长很长很长很长很长很长很长很长很长很长的文字

 

  处理文字过长点点点显示，传统方式为：

    

.ell{
   width:200px;        /*定宽*/
   white-space: nowrap;
　 overflow: hidden;
　 text-overflow: ellipsis;
}

  既然是定宽那么就不能自适应了，但是表格是自适应的，不能加上：table-layout：fixed；所以就出现了上面的bug。

 

  解决方式：

  给加上:

 

overflow: hidden;
text-overflow: ellipsis;

 

  为行内元素不变，不能设置为块级元素，这样a的宽度就是文字的长度了。

 

white-space: nowrap;

 

• 
• 大小: 35.6 KB

• 查看图片附件