1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > jq 控制td只显示一行_CSS让表格里的内容强制显示一行 超出长度显示省略号

jq 控制td只显示一行_CSS让表格里的内容强制显示一行 超出长度显示省略号

时间:2018-09-13 12:33:53

相关推荐

jq 控制td只显示一行_CSS让表格里的内容强制显示一行 超出长度显示省略号

在写html页面的时候,会经常用到表格,而且很多时候一个tr里边需要包含好几个td,这样就会导致tr的高度不一致,被撑开了

这时候,如果能让td里的内容强制显示在一行,并让超出边界范围的内容显示点点,然后再给td加个title属性,显示当前td的内容,这难道不是最理想的结果吗?

其实很简单,4行代码搞定它:

table{

table-layout: fixed;

}

td{

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

需要注意的有:

1、table-layout需要设置为fixed,用来固定表格布局,(这个属性非常非常有用,对于提升页面性能,这样就不会每次当表格宽度变化的时候自适应td宽度。) 当然给每个td加宽度也可以,但是显然没有前者更高效

2、white-space需要设置为nowrap,用来强制不换行

3、overflow设置为hidden,内容溢出的时候不显示

4、text-overflow设置为ellipsis, 内容溢出的时候,溢出部分显示为...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。