结论：只写 overflow-wrap: break-word 几乎一定失效，必须配 white-space: normal + 明确宽度（width 或 max-width）才能生效，因其仅在容器有宽度约束且允许换行的上下文中触发断词。
直接说结论：只写 overflow-wrap: break-word 几乎一定失效，必须配 white-space: normal + 明确宽度（width 或 max-width）才能生效。
为什么 overflow-wrap: break-word 单独写没用
它不是“开启换行开关”，而是告诉浏览器：“当一个不可分割的长串（比如 URL、base64、无空格哈希）放不进当前行时，允许你在词内断开”。但前提是：浏览器得知道“当前行有多宽”。
- 如果容器没设
width、max-width，或被父级 flex/grid 拉伸到无限宽，overflow-wrap就没判断依据 - 如果同时存在
white-space: nowrap或white-space: pre，这两个值会直接压制换行行为，overflow-wrap彻底被忽略 - 某些 CMS 或框架生成的 HTML 里，
Flex 容器里文字死活不换行怎么办
这是最常踩的坑：Flex 子项默认 min-width: auto，它会“保护”内容不被压缩，哪怕你写了 overflow-wrap: break-word，浏览器也优先撑开容器而不是换行。
- 给子元素加
min-width: 0，解除 Flex 的最小宽度保护 - 再补上
overflow-wrap: break-word和white-space: normal - 避免写
flex: 0 0 auto或white-space: nowrap这类组合，它们会叠加封锁效果 - 在 Safari 旧版中，
flex: 1不一定等价于min-width: 0，建议显式声明
overflow-wrap vs word-break：该用哪个
overflow-wrap: break-word 是保守策略：只在整词放不下时才断，对英文友好，对中文无效（中文本就按字断）；word-break: break-all 是暴力策略：无视语义，见缝就切，适合日志 ID、token 等纯技术字符串。
- 展示用户输入的 URL 或英文术语（如
userProfileDataV2Response）→ 用overflow-wrap: break-word - 显示 Base64 片段、哈希值、无分隔符文件名 → 用
word-break: break-all - 中英文混排正文（如评论区）→ 用
word-break: break-word（注意不是break-all），它对中文按字断，对英文仍保词义 - 别混用：同时写
overflow-wrap: break-word和word-break: break-all会导致行为不可预测
移动端和老浏览器的兼容细节
iOS Safari 10.1+ 支持标准 overflow-wrap，但 iOS 11.3 及更早版本仍需回退到 word-wrap: break-word；Android WebView 基本无坑。表格单元格（<td>）要生效，还得加 <code>table-layout: fixed 和明确宽度。
- 稳妥写法：
word-wrap: break-word; overflow-wrap: break-word;（前者是后者的别名，仅作兼容） - 表格场景下，
td { table-layout: fixed; width: 150px; overflow-wrap: break-word; } - Safari 对
table-layout: fixed下的overflow-wrap渲染不稳定，可加hyphens: auto辅助触发断行 - 别依赖
word-wrap单独存在——它早在 CSS3 就被标记为过时，现代工具链可能直接忽略
真正卡住的点往往不在属性本身，而在容器是否具备“可换行的前提条件”：有宽度约束、没被 white-space 锁死、没被 Flex 默认行为保护。这些细节比记住属性值更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
