自适应表格连续字符换行及单行溢出点点点显示

我们应该都知道使用

word-break: break-all;

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

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

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

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

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

例如,连续的英文字符会撑开单元格,而无视其外部的宽度设置,类似下面截图效果:
表格中连续英文不换行示意 张鑫旭-鑫空间-鑫生活

以及单行文字溢出点点点效果也会无效,因为单元格的流动性,使得文字根本就不存在溢出这种说法。

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

table-layout: fixed;

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

您可以狠狠地点击这里:连续英文换行以及单行文字点点点demo

下图为demo页面表格table-layout: fixed后的效果截图:
修复后的表单可以单行溢出点点点显示以及连续英文字符换行

兼容IE6+

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

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

这样的固定组合解决方案。zxx.lib.css中的.cell_bk就是类似的处理。

可以应用在父容器,可以是内部子元素。

总之,希望能对遇到类似问题的人提供一点帮助,以上~感谢阅读~ 本文应该不会有人吐槽啰嗦了吧!

(本篇完)

分享到:

标签: , , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想要工资30K? ×


发表评论(目前7 条评论)

  1. xin说道:

    除了加标签,还有什么方法实现多行溢出省略

  2. yyaa说道:

    这个属性一直没被用过,学习了,回去实验了

  3. brucewar说道:

    借鉴下评论功能的实现

  4. 炎热夏日说道:

    老物,拿出来了,

  5. muzinian说道:

    给出的demo中HTML代码处理后表格的table 没有加正确的class

  6. 于江水说道:

    看到与表格有关,我想自荐一篇文章作为补充,为新手提供一些帮助:

    table 那些事 http://yujiangshui.com/about-table/

    以及对应的 Demo

    http://codepen.io/yujiangshui/full/blvEp