overflow-wrap: break-word 是在单词整体无法放入当前行时才允许内部断行的换行策略。它优先保持词完整，仅当超长单词（如哈希串）超出容器宽度时才断词，不破坏语义与可访问性，是现代项目的首选方案。
overflow-wrap 是解决长单词、URL、哈希串等“不可分割内容”溢出容器的最直接手段。它不改变语义，不破坏可访问性，也不强制在任意位置断词——只在整词放不下时才换行，是现代项目的首选方案。
overflow-wrap: break-word 是什么行为
它让浏览器在「单词整体无法放入当前行」时，才允许在单词内部断开换行。和 word-break: break-all 不同，它不会把 hello 切成 hel-lo，除非整词 supercalifragilisticexpialidocious 真的塞不进 200px 宽度里。
-
overflow-wrap: normal（默认）：哪怕单词撑破容器，也坚决不换行 -
overflow-wrap: break-word：只在必要时断词，优先保词完整 -
overflow-wrap: anywhere：可在任意字符间断（含空格前），比break-word更激进，但语义更弱，慎用
为什么加了 overflow-wrap 还不换行
常见失效不是属性写错，而是被其他 CSS 或布局机制压制了：
- 父容器用了
display: flex，但子元素没设min-width: 0—— flex item 默认min-width: auto，会阻止收缩，overflow-wrap彻底失效 - 误加了
white-space: nowrap，它优先级高于overflow-wrap，直接禁用所有自动换行 - 容器没设
width或max-width，浏览器没“换行依据”，overflow-wrap不触发 - 用了
display: table-cell或inline-block，它们对宽度和换行控制有特殊规则，overflow-wrap表现不稳定
兼容写法与推荐组合
不必纠结旧名 word-wrap，现代项目直接用标准属性 overflow-wrap 即可。如需兼容 IE10+，可双写：
div {
width: 300px;
overflow-wrap: break-word;
word-wrap: break-word; /* 兼容旧版 */
}
但真正关键的是上下文配合：
- 普通块级文本：
white-space: normal; overflow-wrap: break-word; - 用户评论/留言（需保留原始换行）：
white-space: pre-wrap; overflow-wrap: break-word; - Flex 子项内文本：
min-width: 0; overflow-wrap: break-word;（min-width: 0比overflow: hidden更语义清晰） - 表格单元格：
td { white-space: normal; overflow-wrap: break-word; max-width: 200px; }
别和 word-break: break-all 混用
word-break: break-all 和 overflow-wrap: break-word 解决的是不同问题：
-
overflow-wrap: break-word是“防溢出兜底”——只在词太大时才动刀 -
word-break: break-all是“无条件硬切”——https://example.com可能在h和t中间就断开 - 两者同时存在时，
word-break会抢占逻辑，导致本该完整的词也被乱切
除非你明确处理纯技术字符串（如 base64、sha256 哈希），否则不要启用 word-break: break-all；更不要把它和 overflow-wrap: break-word 同时设在同一个元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
