只写 overflow-wrap: break-word 通常不够，必须配合 max-width 和布局上下文调整才能生效；其失效主因是 Flex 子项默认 min-width: auto 抗压阻止压缩，需显式设 min-width: 0 才触发换行。
直接结论：只写 overflow-wrap: break-word 通常不够，必须配合 max-width 和布局上下文调整才能生效。
为什么 overflow-wrap: break-word 在 Flex 容器里经常失效
不是属性写错了，是 Flex 子项默认的 min-width: auto 在“抗压”——它会阻止子元素被压缩换行，哪怕你写了 overflow-wrap: break-word。
- 给子元素加
min-width: 0是最常见解法（flex: 1有时隐含该行为，但不保险） - 如果父容器是
display: flex且没设flex-wrap: wrap，子项会被强行拉宽，overflow-wrap彻底失去作用点 - 移动端 iOS Safari 12 以下对
min-width: fit-content+overflow-wrap组合支持极差，建议一律显式写min-width: 0
overflow-wrap: break-word 不生效的典型场景和检查项
它只对「无自然断点的连续字符串」起效，比如 https://example.com/v1/very/long/path/with/no/spaces。一旦条件不满足，就静默失效。
- 确认父容器有明确宽度约束：
max-width（推荐）或width，纯width: 100%在嵌套 inline 元素中可能无效 - 检查是否被
white-space: nowrap、white-space: pre或pre标签覆盖——它们会直接禁用所有换行逻辑 - 留意 Unicode 窄空格（
），它们也会阻断overflow-wrap的触发 - 在
table-cell中，需配合table-layout: fixed才能稳定生效
overflow-wrap: break-word vs anywhere：选哪个
break-word 是兼容性首选（IE10+ 支持），行为保守：先尝试按 /、.、- 等自然分隔符换行，失败后才硬切；anywhere 更激进，只要放不下就立刻断，但 Chrome 63+、Firefox 63+、Safari 12.1+ 才支持。
- 对外部不可控内容（如用户粘贴的 URL、API 返回的路径）用
break-word更稳妥 - 若需支持旧版 IE，只能用
word-wrap: break-word（overflow-wrap的旧名），并补word-break: break-word供老 Safari 回退 - 别混用
overflow-wrap: anywhere和word-break: break-all——后者会完全接管断行逻辑，前者失效
中英文混排时的隐藏陷阱
中文本身按字可断，浏览器认为“有地方可断”，于是跳过 overflow-wrap 的兜底逻辑，导致夹在中文里的英文长串（如 test123456789）依然溢出。
- 解决方案是组合：
word-break: keep-all（禁中文内断） +overflow-wrap: break-word（保英文长串不断行） - iOS 12 以下不支持
keep-all，需补-webkit-word-break: keep-all - 注意
keep-all对英文仍走 normal 规则，所以它不会破坏APIKey这类词的完整性
真正卡住人的从来不是属性名记不牢，而是 min-width: 0 忘了加、white-space 意外继承、或者以为写了 overflow-wrap 就万事大吉——它只在“容器真有边界”且“内容真没退路”时才出手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
