overflow-wrap: break-word 是唯一能稳定处理中英文混排长串的 css 方案，因其可协同 min-width: 0 和 display: block 触发浏览器折行逻辑，而 word-break: break-all 在 flex 中失效是因子项默认 min-width: auto 锁死压缩，wbr 仅作断点建议且依赖容器宽度与 overflow-wrap 配合。
overflow-wrap: break-word 是唯一能稳定处理中英文混排长串（如 URL、邮箱、驼峰标识符）的 CSS 方案，其他写法多数失效或行为不可控。
为什么 word-break: break-all 在 flex 容器里不生效？
它确实可能“看起来没反应”——不是属性错了，而是子元素被 min-width: auto 锁死了压缩能力。Flex/Grid 项默认带这个隐式约束，哪怕你写了 max-width: 200px，浏览器仍认为“这个词不能切”，于是撑破容器。
- 修复方法：给目标元素加
min-width: 0或overflow: hidden - 别同时设
white-space: nowrap，它会直接禁用所有换行逻辑 - 验证是否生效：打开开发者工具，检查 computed 样式里
overflow-wrap是否为break-word，而不是word-break: break-word（后者是过时别名，Chrome 早已移除）
wbr 标签为什么加了也不换行？
wbr 不是强制断点，只是建议浏览器“这里可以断”。90% 的失效是因为三重条件缺一：
- 容器没设
width或max-width，浏览器永远判定“还能塞下” - 没配
overflow-wrap: break-word，wbr的建议被直接忽略 - 父级用了
white-space: nowrap（比如code标签），必须显式覆盖为white-space: normal - 位置插错：URL 应在
/、.、@后；驼峰命名应在大写字母前，如fetch<wbr>Data</wbr>，而非hel<wbr>lo</wbr>
中英文混排时 word-break: keep-all 单独用无效？
它只管“中文不断字”，但对夹在中文里的英文长串（如“测试test123456789”）完全不管——英文部分仍整段溢出。必须和 overflow-wrap: break-word 联用，才能让英文部分在容器边界处折行。
- 错误写法：
word-break: keep-all单独作用于span - 正确组合：
word-break: keep-all; overflow-wrap: break-word; - 注意：
span默认是 inline 元素，必须加display: block或inline-block才响应宽度约束
真正容易被忽略的是：双字节字符换行问题，本质不是“怎么断”，而是“谁来决定能不能断”。浏览器只在明确知道“这个块有宽度限制”且“允许折行”的前提下才触发断行逻辑——min-width: 0、display: block、overflow-wrap: break-word 这三者缺一不可，少一个就退回默认溢出行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
