CSS让表格里的内容强制显示一行,超出长度显示省略号

时间:2024-02-25 15:24:00

在写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, 内容溢出的时候,溢出部分显示为...