码云笔记前端博客
Home > HTML/CSS > 如何使table表格td中超出的文字以省略号显示

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

2018-08-31 分类:HTML/CSS 作者:码云 阅读(1068)

本文共计1402个字,阅读时间预计4分钟,干货满满,记得点赞加收藏哦

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

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

HTML代码:

1
<div class="wrap" title="<{$row[ 'productname']}>"><{$row[ 'productname']}></div>

css代码:

1
2
3
4
5
6
.wrap{
width: 150px; //设置需要固定的宽度
white-space: nowrap; //不换行
text-overflow: ellipsis; //超出部分用....代替
overflow: hidden; //超出隐藏
}

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

效果:

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

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

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

1
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代码实现:

1
2
3
4
5
6
7
8
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中超出的文字以省略号显示?相信大家看了本文内容有所明白,本文内容仅供参考,如有雷同,纯属巧合。好的技术源于不断地积累学习,记笔记也是一种很好的学习方式。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(6) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
6

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 如何使table表格td中超出的文字以省略号显示

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 471 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1033 个
  • 建站时间: 522 天
  • 访问总量: 8680908 次
  • 最近更新: 2019年11月15日