在表格里经常用到溢出隐藏,溢出省略,发现直接在td标签里使用overflow:hidden有时无效。
如果遇到这种情况,尝试两种方式可以解决:
解决方法一: 在table里使用table-layout:fixed;
<table style="table-layout:fixed">
<td style="overflow:hidden">
</td>
</table>
table-layout:fixed是什么鬼??百度翻译结果:表格布局:固定;
这是一个固定布局的算法,表格的宽度不是根据表格里的内容改变而改变的,display:inline-block,width规定了表格列的宽度。
PS: 溢出省略号css代码>overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 然后固定容器宽度就可以啦。
text-overflow:ellipsis 属性的兼容性很好,尤其不用担心IE兼容问题(ie6+都可以),但火狐浏览器需要7.0+,加个-o-欧朋浏览器前缀就OK了,对于火狐低版本浏览器,需要用js截取方法(还有更好办法?)
解决方法二:在table的td中使用div 把内容放进去,固定宽度,做溢出处理。