word-break决定“能不能在单词内断”，overflow-wrap决定“要不要在溢出时断”；前者控制断行许可权（如break-all强制任意字符断），后者仅在容器溢出且无自然断点时兜底断词。
word-break 和 overflow-wrap（原 word-wrap）不是“类似功能的两个选项”，而是作用机制完全不同的两个控制点：前者决定「能不能在单词内部断」，后者决定「要不要在溢出时断」。
word-break 控制断行许可权
它不看容器是否溢出，只管“允许在哪断”。设置为 break-all 时，浏览器会无视语义，在任意字符后插入换行机会——哪怕是一个英文单词中间、一个中文词组里、甚至 Base64 字符串的第 17 位。
-
normal：CJK 文本按字断，非CJK文本只在空格/连字符处断 -
break-all：所有文本强制可断，适合表格单元格、密排数据、无空格长串 -
keep-all：CJK 文本禁止单字断行（除标点/空格），常用于韩文或需保持词语完整的中文场景
⚠️ 容易踩的坑：break-all 在移动端长列表中可能引发重排性能下降；iOS Safari 上每百个元素多耗约 8ms，且会让英文单词失去可读性（如 Supercalifragilisticexpialidocious → Superca / lifragil）。
overflow-wrap 控制断行触发时机
它默认不干预，只在「内容已超出容器宽度且常规断点（空格、标点）不可用」时才出手。它的 break-word 值本质是兜底策略，不是主动断行指令。
-
normal：只在空格、连字符等自然断点换行 -
break-word：当单词太长撑破容器时，才在单词内找位置断（优先选连字符后、或字母间较宽松处）
✅ 典型场景：展示用户提交的 URL、代码片段、或混合中英文的段落。它不会破坏正常段落结构，只救急。
⚠️ 注意兼容性：word-wrap 是旧名，所有现代浏览器都支持，但规范推荐写 overflow-wrap；IE8 及更早只认 word-wrap，不过现在基本可忽略。
两者混用时谁起效？
它们可以共存，但生效逻辑不叠加，而是分层作用：
-
word-break: break-all会直接覆盖overflow-wrap: break-word的兜底行为——因为前者已经把“所有位置都设为可断”，后者没机会触发 -
word-break: normal+overflow-wrap: break-word是最安全组合：先按语言规则尝试断，失败再兜底 -
white-space会影响二者前提：若设了white-space: nowrap，那两个属性都失效
实际调试时，如果发现 overflow-wrap: break-word 没反应，先检查是否被 word-break: break-all 覆盖，或容器本身没设固定 width ——它只在“溢出”时才工作。
真正容易被忽略的是：这两个属性都不解决“单字超宽”问题（比如一个 500px 宽的 emoji 或 SVG 内联图标），那种情况得靠 max-width: 100% 或 object-fit 配合处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
