为何overflow-wrap: break-word与anywhere在表格中表现存在差异？

核心差异与失效原因 #

• overflow-wrap: break-word：只有当内容的固有宽度超过容器的可用宽度时，才会在任意位置断词。但表格单元格默认会自动扩展宽度来容纳长内容，导致内容永远不会“超出”单元格宽度，因此这个属性无法触发。
• overflow-wrap: anywhere：会主动参与容器宽度计算，强制单元格在达到容器限制宽度时，不管内容有没有空格都执行断词，不会让单元格无限扩展宽度。

解决办法：给表格/单元格设置宽度约束 #

要让break-word生效，必须给表格或单元格明确设置宽度限制，两种常见方式：

1. 给table设置width: 100%，让表格继承父容器的宽度；
2. 给td设置max-width，直接限制单元格的最大宽度。

修改后的代码示例 #

CSS

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%; /* 新增：让表格继承父容器宽度 */
}
td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
td {
    overflow-wrap: break-word;
    /* overflow-wrap: anywhere; */
    max-width: 400px; /* 可选：直接限制单元格最大宽度 */
}
tr:nth-child(even) {
    background-color: #dddddd;
}

HTML

<h2>HTML Table</h2>
<div style="width: 600px;">
    <table>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial
                MoctezumaMoctezumaMoctezumaMoctezumaMoctezumaMoctezumaMoctezumaMoctezumaMoctezumaMoctezumaMoctezumaMoctezuma
            </td>
            <td>Mexico</td>
        </tr>
    </table>
</div>

设置宽度约束后，break-word就能正常触发断词——单元格宽度被限制，长内容超过宽度阈值后会自动断行。

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