这是实际项目中测试提的一个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;