word-wrap: break-word 和 overflow-wrap: break-word 的区别

word-wrap: break-word 和 overflow-wrap: break-word 实际上是同一个 CSS 属性的不同名称，它们的功能完全相同。区别仅在于命名的历史演变。

📜 背景说明

• word-wrap 是微软最早在 IE 浏览器中引入的一个非标准属性，用于控制长单词或 URL 在必要时是否可以被断行。
• 后来，W3C 标准化组织采纳了这个功能，但将其重命名为 overflow-wrap，以更准确地反映其作用（即处理内容溢出时的换行行为）。
• 为了向后兼容，大多数现代浏览器同时支持 word-wrap 和 overflow-wrap，并且它们的行为完全一致。

✅ 功能对比

💡 word-wrap 现在被视为 overflow-wrap 的别名（alias）。

🔧 常用值

两者都支持以下值：

• normal：只在允许的断点处换行（默认）。
• break-word：在必要时（如内容溢出容器）强制在任意位置断开长单词。
• anywhere（仅 overflow-wrap 支持）：比 break-word 更激进，会在任何字符间断行（即使有正常断点也优先最小化宽度）。

⚠️ 注意：word-wrap 不支持 anywhere，因为它是旧属性。

✅ 最佳实践

/* 推荐写法：兼顾新标准和旧浏览器 */
.overflow-container {
  overflow-wrap: break-word;
  word-wrap: break-word; /* 为非常老的浏览器提供兼容性 */
}

虽然现代浏览器基本都支持 overflow-wrap，但如果你需要支持一些较老的环境（比如旧版 Android 浏览器），保留 word-wrap 作为 fallback 是安全的做法。

📌 总结

• 功能上无区别：word-wrap: break-word ≡ overflow-wrap: break-word
• overflow-wrap 是标准名称，推荐使用
• word-wrap 是历史遗留别名，仍有效但未来可能逐步淘汰
• 若需最大兼容性，可两者同时写

如有其他 CSS 布局相关问题，欢迎继续提问！