overflow-wrap: break-word与word-break: break-word差异及生效异常原因探究

你遇到的差异和表格单元格的默认布局特性直接相关，并非两个属性本身的规范定义冲突：

1. 属性的规范背景
   早期word-break: break-word是浏览器的非标准实现，后来CSS规范将其归为overflow-wrap: break-word的别名，理论上在常规容器中二者表现一致，但在表格这种特殊容器里会出现差异。

2. 表格单元格的布局特性
   <td>默认会自动扩展自身宽度来容纳内部内容，不会主动限制宽度触发换行。这时候：

• word-break: break-word 会强制忽略容器的扩展行为，直接在长单词内部断开换行，不管单元格是否能被拉长。
• overflow-wrap: break-word 的触发逻辑是仅当内容无法在当前容器宽度内容纳时，才会断开长单词。因为表格单元格自动扩展到了能装下整个长单词的宽度，所以这个属性没有触发换行。

3. 验证与解决方法
   如果给表格添加table-layout: fixed（固定表格布局，让单元格宽度遵循设置的width），或者给<td>设置max-width: 100px，限制容器宽度后，overflow-wrap: break-word就会正常触发换行：

<!-- 添加table-layout: fixed后，overflow-wrap也会换行 -->
<table style="width: 100px; border: 1px solid red; table-layout: fixed">
  <tr>
    <td>
      <div style="overflow-wrap: break-word">
        hdsqdhsqydhsqgydqgsydgysqgydsqgydsgqydygsqgydsqgy
      </div>
    </td>
  </tr>
</table>

总结来说，二者的核心区别在于换行触发的优先级：word-break: break-word是强制断开长单词，而overflow-wrap: break-word需要容器宽度被限制后才会生效，这在具有自动扩展特性的容器（比如表格单元格）中表现得尤为明显。

内容的提问来源于stack exchange，提问作者rap-2-h