`
tigerl
  • 浏览: 97214 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

很实用,有木有?
2
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics