优先选overflow-wrap: break-word，仅在需“劈开任意字符”时用word-break: break-all；word-break: break-word已废弃，所有主流浏览器均不支持，写了无效。
直接结论：别用 word-break: break-word，它已废弃；长单词换行优先选 overflow-wrap: break-word，仅在明确要“劈开任意字符”时才用 word-break: break-all。
为什么 word-break: break-word 一定不能写
这个值早在 Chrome 早期就被移除，现在所有主流浏览器都当它不存在——写了等于没写，computed styles 里根本看不到生效。很多老项目还留着这行，结果就是“明明加了却溢出”。真正该用的是 overflow-wrap: break-word（旧名 word-wrap: break-word，兼容性略好但语义模糊）。
word-break: break-all 在 Flex/Grid 里不生效？先查 min-width
常见现象：给子元素写了 word-break: break-all，父容器也设了 max-width: 200px，但 URL 还是撑破容器。大概率因为父容器是 display: flex 或 grid，子项默认带 min-width: auto，锁死了压缩行为。
- 修复方法：给子元素加
min-width: 0或overflow: hidden - 别依赖
white-space: nowrap同时存在，它会覆盖换行行为 - 确保子元素是块级（
display: block或inline-block），span默认无效
中英混排或纯中文场景下，word-break: keep-all 很关键
中文本身会在字之间换行，但一旦夹着英文长串（比如“测试test123456789”），英文部分可能整段溢出。overflow-wrap: break-word 单独用往往压不住——必须补上 word-break: keep-all，它能阻止中文被切开，同时把英文交由 overflow-wrap 按需断。
- iOS 12 以下对
keep-all支持弱，可加-webkit-word-break: keep-all兜底 - 它对纯英文无效（英文仍按字母断），所以和
overflow-wrap是互补关系，不是替代 - 如果容器里还有代码片段，建议额外加
white-space: pre-wrap保留缩进
overflow-wrap: anywhere 和 break-word 表面一样，但底层逻辑不同
两者在常规容器里效果几乎一致，但当你把容器宽度设为 min-content（比如 flex 子项、自动收缩的按钮），差异就出来了：anywhere 会让最小内容宽度缩到单个字符宽，而 break-word 仍按最长单词算宽度。这意味着在弹性布局中，anywhere 更容易“挤进去”，适合极窄空间下的兜底。
真正容易被忽略的是：所有这些属性都必须配合有明确宽度限制的容器（width、max-width 或弹性约束）才生效；没有宽度，浏览器根本没换行动机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
