html表格字数显示,如何使table表格td中超出的文字以省略号显示

在现实开发中经常会遇到文字过长导致用户体验度不好的现象，所以我们常用到的解决方法就是使过长的文字隐藏显示省略号，鼠标滑过显示完整的文字，这样既解决了文字过长的问题，又使得用户体验更好。关键是纯css就能搞定，接下来就为小伙伴们介绍详细实现方法。

我们在控制一个div里的内容很简单，设置div的宽度，利用white-space: nowrap;使内容不换行，而超出这个宽度的用overflow: hidden;隐藏超出的内容，并通过text-overflow: ellipsis;显示省略号，即可实现想要的效果。

HTML代码：

css代码：

.wrap{

width: 150px; //设置需要固定的宽度

white-space: nowrap; //不换行

text-overflow: ellipsis; //超出部分用....代替

overflow: hidden; //超出隐藏

}

如果需要鼠标移动过去的时候显示全部文字，也很简单，给title赋值就可以了，利用html的属性，是最好的解决办法，如果有更好的办法，可以告诉我哦！

效果：

上面只是抛砖引玉，对于table表格td内容省略号这不单单是上面css就能实现的，还需要用到table-layout属性。

我们通过table-layout属性设置表格的布局算法：

table { table-layout: fixed;} //必须，表格宽度不随文字增多而变长。

属性定义及使用说明

table-layout属性为表设置表格布局算法。

默认值：

auto

继承：

no

版本：

CSS2

JavaScript 语法：

object.style.tableLayout=”fixed”

浏览器支持

所有主流浏览器都支持table-layout属性。

注意： IE7和更早的版本不支持”inherit”的值。IE8需要定义！DOCTYPE。IE9支持”inherit”。

属性值

值

描述

automatic

默认。列宽度由单元格内容设定。

fixed

列宽由表格宽度和列宽度设定。

inherit

规定应该从父元素继承 table-layout 属性的值。

完整css代码实现：

table {

table-layout: fixed;/*必须，表格宽度不随文字增多而变长。 */

}

td {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

原理解释

1、table-layout:fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多少，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。(注意：此样式是关键)

2、white-space:nowrap 是为了保证无论单元格(TD)中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。

3、overflow:hidden 隐藏超出单元格的部分。

4、text-overflow:ellipsis 将被隐藏的那部分用省略号代替。

如何使table表格td中超出的文字以省略号显示？相信大家看了本文内容有所明白，本文内容仅供参考，如有雷同，纯属巧合。好的技术源于不断地积累学习，记笔记也是一种很好的学习方式。