结论：word-break: break-all 是“到边就切”，overflow-wrap: break-word 是“实在放不下才切”；前者强制任意字符间断行，适用于哈希、UUID等无语义要求场景，后者优先自然断点（如/、.、-），再内部断词，适合URL、API路径等需可读性内容。
直接说结论：要用 word-break: break-all 实现“强制换行”，但必须确认它真正在起作用——90% 的失效不是属性写错了，而是被 white-space: nowrap、父容器没设宽、或 Flex/Grid 的 min-width: auto 拦住了。
为什么加了 word-break: break-all 还是不换行？
这不是 word-break 失效，而是它根本没触发换行机会。浏览器只在“有宽度限制 + 允许折行”的前提下才考虑断点策略。
-
white-space: nowrap会彻底禁用所有自动换行，word-break完全无效 - 父容器没设
width、max-width或flex-basis，子元素就“不知道边界在哪”，自然不折 - 在
display: flex或display: grid的子项里，浏览器默认min-width: auto，会撑开容器，此时必须显式写min-width: 0 - 表格单元格（
<td>）默认white-space: nowrap，且受table-layout: fixed锁死，光加word-break不够，还得配max-width: 0或width
word-break: break-all 和 overflow-wrap: break-word 到底怎么选？
二者逻辑完全不同：word-break: break-all 是“到边就切”，overflow-wrap: break-word 是“实在放不下才切”。选错会导致英文单词被生硬截断（如 fetchData → fe-tchD-ata）或中文段落整行溢出。
- 用
word-break: break-all：适合日志 ID、Base64、加密密钥等纯展示字段，你只要它不撑破容器，可读性次要 - 用
overflow-wrap: break-word：适合 URL、API 路径、用户输入的英文内容，它会先找/、.、-等自然断点，再退而求其次切单词 - 中英文混排时，推荐组合：
word-break: keep-all（保中文不断行）+overflow-wrap: break-word（专治英文长串）
Flex/Grid 里 text 溢出却不换行，怎么修？
这是高频翻车现场。Flex item 默认 min-width: auto，会阻止内容收缩，哪怕写了 word-break 和 overflow-wrap，浏览器也认为“这行还能再挤一挤”，结果就是文字强行横着跑出去。
- 必须加
min-width: 0（或overflow: hidden），告诉浏览器：“允许我缩到 0” - 同时确保父容器有明确宽度约束（
width、max-width或flex-basis） - 别依赖
white-space: pre-wrap来救 —— 它保留原始换行，但不会帮你解决无空格长串问题 - 示例修复写法：
div { display: flex; } div > p { min-width: 0; overflow-wrap: break-word; }
最易忽略的一点：word-break 只定义“能在哪里断”，不决定“要不要断”。真正触发换行的是容器宽度 + 白空间策略 + 最小宽度计算三者共同作用。盯着一个属性调，不如先检查这三点是否都到位。
