报表模块格內容超过时显示信息省略号实际效果

表明

在前端开发开发设计中，常常会遇到必须限定模块格宽度而且內容超过一部分显示信息省略号的的状况。下面就简易的详细介绍下怎样做到这类实际效果。

提前准备专业知识

1. 操纵文字不换行

white-space: nowrap;

2. 超过长度时，出現省略号

overflow:hidden;

text-overflow:ellipsis

3. 改动报表合理布局优化算法

table-layout:fixed;table-layout的默认设置值为automatic，意思是列宽度由模块格內容设置。而fixed意思是列宽由报表宽度和列宽度设置。

也便是说当你给报表设置列宽时，具体状况是不起功效的，当模块格內容过量时，仍然会把宽度撑开。假如必须让报表的列宽显示信息方法由自身给模块格界定的列宽决策，就务必应用fixed这个值。

留意：1、报表务必设定宽度 2、假如只设定报表宽度，而不设定列宽度的话，列的宽度会均值分派。

编码演试

以下编码所示，报表中分配了名字、年纪、性別和详细地址4列，这几个列的长度各自为10%、20%、30%、40%。

显示信息实际效果以下所示：

很非常容易能够看出，名字、年纪、性別和详细地址等列的长度各自是10%、20%、30%、40%。

假如将第1个的名字內容增多，实际效果真是不忍心直视（＞﹏＜）！

不忍心直视（＞﹏＜）！！

 怎样把单行內容超过一部分显示信息为省略号呢？只必须将模块格设定以下特性：

话很少说，上编码！

改动后，实际效果以下：

以上这篇报表模块格內容超过时显示信息省略号实际效果(完成编码)便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。