td长度固定,内容过长,超过部分用省略号代替

您所在的位置:网站首页 html隐藏td标签 td长度固定,内容过长,超过部分用省略号代替

td长度固定,内容过长,超过部分用省略号代替

2023-11-06 22:11| 来源: 网络整理| 查看: 265

html的table表格中td长度固定,当内容过长时,超过部分用省略号代替. 具体代码如下:

.mytable { table-layout: fixed; width: 98% border:0px; margin: 0px; } .mytable tr td { text-overflow: ellipsis; /* for IE */ -moz-text-overflow: ellipsis; /* for Firefox,mozilla */ overflow: hidden; white-space: nowrap; border: 1px solid; text-align: left } 测试 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试123123

table的width一定要设置, 不然会出现文字太多时变形的情况.

注释: 原理: 本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:

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

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

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

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

兼容性: Internet Explorer 6, 7, 8, 9及以上版本

FireFox 最新版

Chrome 最新版



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3