如何用CSS阻止表格单元格文本换行？允许内容截断保单行

要让表格单元格内容不自动换行、保持单行显示（支持截断），完全可以通过CSS实现，以下是具体方案：

核心CSS实现 #

给<td>元素添加以下样式组合，即可强制内容单行显示并处理溢出：

td {
    border: 1px solid #bbb;
    padding: 0.2em;
    /* 禁止文本换行 */
    white-space: nowrap;
    /* 隐藏超出单元格范围的内容 */
    overflow: hidden;
    /* 超出内容末尾显示省略号（可选，不需要可删除） */
    text-overflow: ellipsis;
    /* 设置单元格固定宽度，触发截断逻辑 */
    width: 120px;
}

关键属性说明 #

• white-space: nowrap：强制文本在一行内显示，完全禁止自动换行
• overflow: hidden：将超出单元格宽度的内容隐藏，避免撑大表格
• text-overflow: ellipsis：让被截断的内容以省略号结尾，提升视觉体验
• 固定width：必须设置单元格宽度，否则内容会无限撑开单元格，不会触发截断

修改后的完整代码示例 #

<html>
<head>
    <title></title>
    <style>
        table {
            border-spacing: 0px;
            /* 可选：固定表格布局，让列宽分配更稳定 */
            table-layout: fixed;
            width: 100%;
        }

        td {
            border: 1px solid #bbb;
            padding: 0.2em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 120px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>row1 col1 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col2 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col3 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col4 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col5 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col6 - The quick brown fox jumps over the lazy dog</td>
            <td>row1 col7 - The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>row2 col1</td>
            <td>row2 col2</td>
            <td>row2 col3</td>
            <td>row2 col4</td>
            <td>row2 col5</td>
            <td>row2 col6</td>
            <td>row2 col7</td>
        </tr>
        <tr>
            <td>row3 col1</td>
            <td>row3 col2</td>
            <td>row3 col3</td>
            <td>row3 col4</td>
            <td>row3 col5</td>
            <td>row3 col6</td>
            <td>row3 col7</td>
        </tr>
        <tr>
            <td>row4 col1</td>
            <td>row4 col2</td>
            <td>row4 col3</td>
            <td>row4 col4</td>
            <td>row4 col5</td>
            <td>row4 col6</td>
            <td>row4 col7</td>
        </tr>
    </table>    
</body>
</html>

其他可选方案 #

• 用max-width替代固定宽度：给td设置max-width，当内容超过该宽度时才触发截断，比固定宽度更灵活
• 固定表格整体宽度：不给单个单元格设宽度，而是给<table>设置width并配合table-layout: fixed，让浏览器自动分配列宽，同样能实现单行显示

内容的提问来源于stack exchange，提问作者Rod