小记：用CSS解决表格中数据折行的问题

CSS样式技巧解析

最新推荐文章于 2022-12-06 13:54:30 发布

原创最新推荐文章于 2022-12-06 13:54:30 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

本文介绍了一种使用CSS实现文本溢出时显示省略号的方法，通过设置特定的CSS属性，可以使得超出容器宽度的文本部分被隐藏并以省略号形式展示。此技巧适用于网页布局中对文本长度有限制的情况。

table tr th { 
    border: 1px solid #FF00FF; 
    overflow: hidden; /*超出长度的内容不显示*/ 
    /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/ 
    word-break: break-all; /*字内断开*/ 
    [color=red]text-overflow: ellipsis;[/color] /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
}