绝大多数情况下应优先使用 overflow-wrap: break-word，它仅在单词超长且无空格等自然断点时才内部断行，兼顾语义完整性与布局稳定；word-break: break-all 会无差别切分任意字符，仅适用于哈希、UUID等纯技术字符串。
绝大多数情况下，直接用 overflow-wrap: break-word 就够了；word-break: break-all 是高风险操作，除非你明确需要“劈开任意字符”，否则别碰。
为什么 overflow-wrap: break-word 是默认安全选择
它只在真正撑爆容器时才干预：先尝试按空格、斜杠（/）、点（.）等自然断点换行；失败后才在长单词内部切开。比如 https://example.com/very/long/path 会优先在 / 后换行，而不是把 very 切成 ve 和 ry。
必须配合 width 或 max-width 才生效——没有宽度限制，浏览器根本不知道“溢出”在哪。
- 不改变元素的
min-content宽度计算，避免 flex/grid 布局意外收缩 - 对中英文混排友好，不会破坏 URL 可点击性或技术术语可读性
- 旧名
word-wrap: break-word仍被广泛支持，兼容 IE10+，建议双写：overflow-wrap: break-word; word-wrap: break-word;
word-break: break-all 什么时候真能用上
它不是“让长单词换行”，而是“允许在任意两个字符之间插入换行点”，包括中文字符之间、变量名中间、甚至 base64 字符串里。这会导致语义断裂，比如 JapaneseText 变成 Japa… 和 …neseText。
立即学习“前端免费学习笔记（深入）”；
真实可用场景极窄：
- 日志面板展示哈希值、UUID、base64 编码等纯机器生成字符串
- 表格单元格固定宽度且内容完全无语义要求（如监控系统指标列）
- flex 或 grid 子项中用了
break-all却没效果？大概率是被默认的min-width: auto锁住了，加min-width: 0或overflow: hidden才能松开
注意：word-break: break-all 会完全覆盖 overflow-wrap 的行为，两者同时存在时后者无效。
中英混排场景下容易踩的坑
中文段落里夹着英文长串（如 测试test123456789），单用 overflow-wrap: break-word 可能无效——因为中文本身按字换行，浏览器认为“有地方可断”，就不触发兜底逻辑。
解决方案是组合使用：
-
overflow-wrap: break-word处理极端长串（URL、路径） -
word-break: keep-all禁止中文内断行，同时让英文部分回归 normal 规则（即只在空格/标点处断） - 移动端 iOS 12 以下不支持
keep-all，需补-webkit-word-break: keep-all
别忘了检查 white-space：如果父元素设了 white-space: nowrap，哪怕写了 overflow-wrap 也完全没用。
现代布局中真正该关注的细节
overflow-wrap: anywhere 在弹性容器（如 min-content 宽度的 flex 项）中比 break-word 更激进——它会让最小内容宽度缩到单个字符宽，更容易“挤进去”。但它目前 Firefox 不支持，Safari 15.4+ 才开始支持，生产环境用前务必查 caniuse。
最常被忽略的一点：连字符（hyphens: auto）在 Chrome 80+、Safari 14.1+ 中配合 lang="en" 能实现词典级断词，比任何强制断行都专业——但它对无连字符的 URL 无效，此时仍得靠 overflow-wrap 兜底。
