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

原创于 2016-07-15 15:00:43 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

9 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了一种解决浏览器窗口大小变化时，表格单元格内的超长文本自适应显示的方法。通过设置TD标签的overflow和text-overflow属性，使文本在超出显示范围时用省略号代替。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

dom结构:

<td>
   <a href="" class="ell company">这是一段很长很长很长很长很长很长很长很长很长很长的文字</a>
</td>

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

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

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

解决方式：

给<td>加上:

overflow: hidden;
text-overflow: ellipsis;

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

white-space: nowrap;