应使用 overflow-wrap: break-word + white-space: normal + 明确宽度三件套；word-wrap 已废弃，white-space 优先级更高，Flex/表格等特殊布局需额外处理。
word-wrap: break-word 已废弃，现在该用 overflow-wrap: break-word，且必须配合 white-space: normal 才能真正生效。
为什么 word-wrap: break-word 不起作用
浏览器早就不推荐 word-wrap 了，它只是 overflow-wrap 的别名，但部分旧写法在现代 CSS 中容易被忽略或覆盖。更关键的是：即使写了 overflow-wrap: break-word，如果容器同时设置了 white-space: nowrap 或 pre 类行为，换行逻辑会被直接禁用。
-
white-space的优先级高于overflow-wrap，它是“开关”级控制 - Flex/Grid 容器默认不换行，子元素需额外声明
overflow-wrap+white-space - 表格单元格（
<td>）有特殊渲染规则，<code>overflow-wrap需搭配table-layout: fixed和明确宽度正确写法：三件套缺一不可
要让长单词、URL 或无空格文本自动折行，得同时满足三个条件：
-
overflow-wrap: break-word（不是word-wrap） -
white-space: normal（确保允许换行，不是nowrap或pre） - 容器有明确的宽度限制（
width、max-width，或受父容器约束）
简短示例：
立即学习“前端免费学习笔记（深入）”；
.text-box { width: 200px; overflow-wrap: break-word; white-space: normal; }注意：
word-break: break-all是另一条路——它会强行在任意字符间断行，破坏可读性，别混用。在 Flex 布局里特别容易失效
Flex 项目默认不换行，哪怕你给子元素写了
overflow-wrap，父容器的flex-shrink: 1（默认值）也可能把内容压缩到最小再溢出，而不是换行。- 给 Flex 子项加
min-width: 0，解除 flex item 的最小尺寸保护 - 确保父容器没设
white-space: nowrap - 避免对子项设
flex: 0 0 auto这类禁止收缩的值
典型修复写法：
.flex-item { min-width: 0; overflow-wrap: break-word; white-space: normal; }兼容性与真实场景差异
overflow-wrap: break-word在所有现代浏览器都支持（包括 IE11），但 Safari 对table-layout: fixed下的overflow-wrap处理不稳定，有时需加hyphens: auto辅助触发。- 中英文混排时，中文天然可断行，重点防的是英文长 Token、Base64 字符串、URL
- 服务端返回的 JSON key 名或日志片段，常含下划线+大小写组合（如
userProfileDataV2Response），这类词不会被break-word拆开，得靠word-break: break-word（注意：这是另一个属性，非别名） - 移动端 WebView（尤其旧版 Android）可能忽略
overflow-wrap，建议 fallback 加word-break: break-word
真正难的不是写对那行 CSS，而是判断当前文本是否“可断”、容器是否“真受限”、父布局有没有悄悄锁死换行能力——这些得看 computed styles，不能只扫一眼代码。
-
