overflow-wrap: break-word 单独使用无效，必须配合 max-width、min-width: 0（尤其 Flex 中）及换行许可环境；其仅在整词超出容器时兜底断行，而父容器无宽度限制、white-space 禁止换行、Flex 子项默认 min-width: auto 或混用 word-break: break-all 均会导致失效。
overflow-wrap: break-word 单独写基本没用，必须配合 max-width、min-width: 0（尤其在 Flex 中）和换行许可环境才能生效。
为什么 overflow-wrap: break-word 经常不生效
它只对「整词放不下」的场景兜底，但浏览器根本不会触发这个逻辑，除非你明确告诉它“容器就这么大”。常见拦路虎包括：
- 父容器没设
max-width或受约束的width（比如display: inline或未限制宽度的flex子项） - 被
white-space: nowrap、pre标签或继承的white-space: pre-line覆盖 - 在
display: flex容器里，子元素默认min-width: auto，死扛不缩，overflow-wrap彻底没机会运行 - 用了
word-break: keep-all——它会压制overflow-wrap的断词行为
overflow-wrap: anywhere 比 break-word 更激进但更可控
它不等空格或标点，只要内容撑破当前行，立刻在任意字符间断。实测对 verylongemailaddress@example.com 在 240px 宽卡片中能自然断成两行，且不会把 example 拆成 ex-ample。
- Chrome 107+、Firefox 109+、Safari 16.4+ 已稳定支持
- 需兼容 Safari 15.4 以下时，可降级加
word-break: break-word（注意：这不是标准值，但实测有效） - 别和
word-break: break-all混用——后者会完全接管断行，前者失效
Flex 容器里必须加 min-width: 0
Flex 子项默认 min-width: auto 是罪魁祸首。它让子元素宁可横向溢出，也不愿压缩换行。解决方法非常具体：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素直接加
min-width: 0（最保险） - 或用
flex: 1（隐含min-width: 0，但某些旧版 Android Webview 不认） - 若父容器是
display: flex且没设flex-wrap: wrap，子项会被强行拉宽，此时overflow-wrap彻底失效 - 移动端 iOS Safari 12 以下对
min-width: fit-content+overflow-wrap组合支持极差，一律显式写min-width: 0
真正起效的最小可用组合
不要只抄一行 overflow-wrap。下面这组是经过多端验证的底线配置：
text {
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word; /* IE 兼容 */
overflow: hidden;
min-width: 0;
}如果内容在 pre 标签里，还得额外加 white-space: pre-wrap；表格单元格要加 table-layout: fixed 才稳。复杂点在于：不是属性本身难，而是它极度依赖上下文——缺一个条件，就静默失效。
