overflow-wrap: break-word单独无效，必须配max-width、min-width: 0和white-space: normal；其本质是兜底断词而非主动换行，失效主因是缺宽度限制、nowrap压制、inline元素未转块级或flex中min-width: auto锁定。
overflow-wrap: break-word 是最稳妥的选择，但它单独写一定无效——必须配宽度限制、松开 min-width 锁定，并确认 white-space 没被设成 nowrap。
为什么写了 overflow-wrap: break-word 还是撑破容器？
它不是“开启换行”的开关，而是“兜底许可”：只有当浏览器确认当前行放不下整个单词时，才允许切开。但这个判断依赖三个前提：
- 父容器有明确宽度（
width或max-width），不能靠 flex/gird 自动拉伸 - 元素自身没继承或显式设置
white-space: nowrap（常见于按钮、标题类组件） - 如果是 flex/grid 子项，其直接子元素必须加
min-width: 0——否则浏览器宁可撑宽容器也不换行
word-break: break-all 在 flex 容器里为啥不生效？
它确实能暴力断开任意字符，但只对块级元素 + 明确宽度的组合起效。flex 子项默认 min-width: auto，相当于给内容加了“防压缩锁”。结果就是：你写了 break-all，浏览器却说“我不换，我先拉宽容器”。
- 解法不是改
word-break，而是给子元素加min-width: 0或overflow: hidden - 别和
flex-shrink: 0共存，后者会覆盖min-width: 0 - 表格单元格中慎用，Safari 旧版本行为不一致
中英文混排时长单词还是溢出？试试 word-break: keep-all
中文本身会在字间自然换行，但夹着英文长串（比如“测试test123456789”）时，英文部分容易溢出。这时单靠 overflow-wrap: break-word 可能不够。
-
word-break: keep-all能阻止中文被意外劈开，同时让英文部分按overflow-wrap规则处理 - 移动端 iOS 12 以下需补
-webkit-word-break: keep-all - 注意：
keep-all对纯英文无效，所以必须和overflow-wrap: break-word配合使用
移动端和旧浏览器兼容要双写
iOS Safari 11.3 及更早不认 overflow-wrap，IE11 只支持 word-wrap。只写一个等于白写。
- 必须双写：
word-wrap: break-word;和overflow-wrap: break-word; - 别用
word-break: break-word——它早在 Chrome 早期就被废弃，现在写上去等于normal -
overflow-wrap: anywhere虽然更激进，但 Safari 15.4+、Chrome 82+ 才稳定支持，老项目慎用
真正卡住换行的，往往不是属性本身，而是容器尺寸约束没到位，或者 min-width: auto 在背后悄悄锁死了子项。检查 computed 值里 min-width 是否真为 0px，比肉眼盯代码更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
