自适应表格字符换行单行溢出省略号table-layout: fixed;

2019-09-04 15:31:19 浏览数 (1)

我们应该都知道使用

代码语言：javascript复制

word-break: break-all;

让连续的英文数字字符换行显示；以及

代码语言：javascript复制

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

让单行文字超出的时候使用点点点表示（Chrome目前有属性可以让多行文字点点点，且点的位置是在中间，见下2行示例代码）。

代码语言：javascript复制

display: -webkit-box; /* height: 36px; line-height: 18px; */ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

但是，如果是自适应的表格中，我们要实现上面两个效果，可能就会遇到挫折，你会发现屡试不爽的方法现在完全被无视了！

如果解决这个问题呢？实际上很简单，给最外面的table标签增加一个声明：

代码语言：javascript复制

table-layout: fixed;

table-layout: fixed的作用在于，让表格布局固定，也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。

兼容IE6

以后，大家或多或少，或者已经开始使用表格相关display属性帮助构建web页面了，总会遇到类似的连续英文字符不换行，或者单行文字溢出没有效果的。此时，您就可以想到table-layout: fixed这厮。您可以试试：

代码语言：javascript复制

display:table; width:100%; table-layout:fixed;

0 人点赞

自适应表格字符换行 单行溢出省略号table-layout: fixed;