css表格文字不换行怎么设置

发布网友发布时间：2024-09-26 06:08

共1个回答

热心网友时间：2024-10-24 22:47

CSS中，要实现表格文字不换行，只需在table和td标签上应用white-space: nowrap;样式。这个属性控制了元素内部空白字符的处理方式。

具体代码如下：

table td { white-space: nowrap; }

white-space有多种值：normal默认忽略空白，pre保留空白符，nowrap阻止文本换行，直到遇到标签结束；pre-wrap保留空白序列并正常换行；pre-line合并空白序列但保留换行符。如果需要从父元素继承设置，可以使用inherit。

为了实现文字溢出隐藏且在超出宽度时显示省略号，可以结合使用text-overflow: ellipsis;、width: 50px;和overflow: hidden;，同时将display设置为block。这样，当文字内容超出td的设定宽度，会自动截断并显示省略号。