如何使table表格td中超出的文字以省略号显示
在现实开发中经常会遇到文字过长导致用户体验度不好的现象,所以我们常用到的解决方法就是使过长的文字隐藏显示省略号,鼠标滑过显示完整的文字,这样既解决了文字过长的问题,又使得用户体验更好。关键是纯 css 就能搞定,接下来就为小伙伴们介绍详细实现方法。
我们在控制一个div
里的内容很简单,设置div
的宽度,利用white-space: nowrap;
使内容不换行,而超出这个宽度的用overflow: hidden;
隐藏超出的内容,并通过text-overflow: ellipsis;
显示省略号,即可实现想要的效果。
HTML 代码:
<div class="wrap" title="<{$row[ 'productname']}>"><{$row[ 'productname']}></div>
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
中超出的文字以省略号显示?相信大家看了本文内容有所明白,本文内容仅供参考,如有雷同,纯属巧合。好的技术源于不断地积累学习,记笔记也是一种很好的学习方式。
码云笔记 » 如何使table表格td中超出的文字以省略号显示