为什么溢出换行：换行符与表中任何位置的行为不同

Question

我不知道为什么

overflow-wrap: break-word;

不能在表中工作。

但是

overflow-wrap: anywhere;

有效。

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
}
td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
td {
    overflow-wrap: break-word;
    /* overflow-wrap: anywhere; */
}
tr:nth-child(even) {
    background-color: #dddddd;
}

<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>

Answer 1

在表中使用 overflow-wrap: Break-word; 时，必须考虑一些事项以确保其按预期工作。由于表格元素处理内容的方式，此 CSS 属性有时在表格中会很棘手。您可以遵循以下一些步骤来确保其正常工作：

确保表格单元格具有定义的宽度：对于溢出换行：break-word；要生效，表格单元格应该有宽度约束。

将表格布局设置为固定：这将使表格尊重其单元格的宽度，这有助于断词。

table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        table-layout: fixed; /* this property added*/
        width: 100%; /* this property added*/
    }
    td,
    th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
    td {
        overflow-wrap: break-word;
        /* overflow-wrap: anywhere; */
    }
    tr:nth-child(even) {
        background-color: #dddddd;
    }