强制table 不换行

最新推荐文章于 2023-11-16 16:45:37 发布

转载最新推荐文章于 2023-11-16 16:45:37 发布 · 536 阅读

文章标签：

#table #border #firefox #chrome #ie

本文介绍了一种使HTML表格中的单元格内容强制不换行的方法，通过使用`word-break: keep-all;`和`white-space: nowrap;`样式属性来确保文本内容在同一行内显示，适用于IE、Firefox及Chrome等浏览器。

table中强制不换行

总是一些文章说要强制换行，很少提到说如何不换行。

一般都会使用word-break: keep-all;使得强制不换行。

    按 Ctrl+C 复制代码
   
    按 Ctrl+C 复制代码

    table
    {
    width
    :
    100%
    ;
    border
    :
    1px solid #999
    ;
    }
    
 table td
    {
    word-break
    :
     keep-all
    ;
    }
   

这在IE下可以用，但是在FireFox和Chrome下是无法达到预期效果的。

需要使用 white-space:nowrap;

    table
    {
    width
    :
    100%
    ;
    border
    :
    1px solid #999
    ;
    }
    
 table td
    {
    word-break
    :
     keep-all
    ;
    white-space
    :
    nowrap
    ;
    }
   