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

很实用,有木有?
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值