word-wrap（现标准名overflow-wrap）仅在长单词或url超出容器时才内部断行，保持语义优先；word-break则强制所有字符间均可断行，包括cjk文本内任意位置，适用于严格宽度控制场景。

word-wrap 和 word-break 有什么区别？

word-wrap（现为 overflow-wrap 的别名）控制长单词或 URL 是否允许换行，仅在必要时折行；而 word-break 更激进，对中文、日文等无空格文本也强制按字/字符断行。
如果你的盒子内容含英文长串（如 verylongfilenamewithoutspaces.txt），用 word-wrap: break-word 就够了；但如果是纯中文段落且容器窄，word-break: break-all 才真能“按需换行”。

• word-wrap: normal：默认，不打断单词，超长内容溢出或撑宽容器
• word-wrap: break-word：只在单词内部打断，前提是该单词本身比容器宽
• word-break: break-all：无视语言规则，连两个汉字之间也敢断

注意：word-wrap 对中文段落几乎无效——因为中文词间本就无空格，浏览器认为“整个段落就是一个单词”，但又不够长到触发 break-word，结果就是不换行、溢出。

为什么设置了 word-wrap 还是不换行？

常见原因不是属性写错，而是父容器没限制宽度或未触发 BFC。

• 容器 width 为 auto 或未设约束（比如在 display: inline 元素里）→ 没有“换行依据”
• 父级用了 white-space: nowrap → 直接覆盖 word-wrap 行为
• 盒子是 flex 子项且没设 flex-shrink: 1 或 min-width: 0 → 默认不收缩，内容硬撑

实操建议：优先加 width: 100% 或 max-width: 300px，再配 word-wrap: break-word；若仍不行，补上 overflow: hidden 或 min-width: 0（对 flex/grid 子项尤其关键）。

Work Productivity Word Mail Workflow Helper

构建并排查Microsoft Word邮件合并及DOCX模板工作流，使用合并域、内容控件、文档属性、重复区块、数据等

下载

现代写法该用 overflow-wrap 还是 word-wrap？

overflow-wrap 是 CSS 规范中的标准属性名，word-wrap 是旧别名，两者行为完全一致，所有主流浏览器都支持。

• 写 overflow-wrap: break-word 更符合当前规范，适合新项目
• 保留 word-wrap: break-word 仅用于需兼容 IE9–IE11 的场景（它们不支持 overflow-wrap）

不必两个都写——除非你明确要兼容 IE9+ 且不愿用 Autoprefixer。现代工程中，单写 overflow-wrap: break-word 即可。

真正容易被忽略的是：换行逻辑依赖于“内容是否被视为不可分割单元”。一个 <span>中文文本</span> 默认可换行，但加上 display: inline-block 或 float: left 后，它就变成块级“原子”，此时哪怕加 overflow-wrap 也无效——得靠 width + word-break 或重置 display 才行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！