word-wrap 长单词换行属性

最后更新：2026-09-13

word-wrap word-wrap 长单词换行属性

word-wrap 属性是 overflow-wrap 的别名，用于控制当长单词或 URL 超出容器宽度时是否允许在单词内部断行。它的设计初衷是防止不可断的长字符串溢出容器，是处理文本溢出问题的常用属性。现代 CSS 规范推荐使用 overflow-wrap 替代。

word-wrap: normal | break-word;

值	类型	描述
`normal \| break-word`	关键字	长单词换行（overflow-wrap 别名）

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
word-wrap	✓ v10	✓ v12	✓ v1	✓ v1	✓ v10
所有主流浏览器均支持

提示： word-wrap: break-word 会优先在单词边界处换行，只有当单个单词超出容器宽度时才会在单词内部断行。

重要： word-wrap 是 overflow-wrap 的历史别名，两者效果完全相同。现代项目建议使用 overflow-wrap 以符合规范。

Qword-wrap 和 overflow-wrap 有区别吗？

A没有区别，两者完全等价。word-wrap 是早期浏览器实现的非标准名称，后来被纳入规范并改名为 overflow-wrap，但为了兼容性保留了 word-wrap 作为别名。

Qword-wrap: break-word 和 word-break: break-all 有什么区别？

Aword-wrap: break-word 会尽量保持单词完整，只在必要时断行；word-break: break-all 会强制在容器边界处断行，不考虑单词完整性。

QURL 或超长单词溢出容器怎么办？

A用 word-wrap: break-word（即 overflow-wrap: break-word）：浏览器优先在单词边界换行，仅当单个超长词放不下时才在词内断行，适合处理 URL、邮箱、哈希串等场景。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。