该用 word-break: break-all 时是表格单元格、日志行、代码块预览等窄宽固定且必须不溢出的场景；它在任意字符间断开，不分语言规则，牺牲单词完整性换行。
word-break: break-all 能强制截断超长英文单词和 URL，但会破坏可读性；overflow-wrap: break-word（即旧 word-wrap: break-word）更安全，只在必要时才拆分。
什么时候该用 word-break: break-all
它适合对「不溢出」有绝对要求、且可牺牲单词完整性的场景。比如表格单元格、日志行、代码块预览这类窄宽固定容器。
- 它会在任意字符间断开，包括
https://中的斜杠、1234567890中的数字之间 - 中文、英文、数字混排时都生效，不区分语言规则
- 若容器宽度是
120px，而内容是thisisalongwordwithoutspaces，它可能拆成thisisa+longword+withoutspaces—— 拆法完全由像素位置决定，无语义 - 别在正文段落或用户可见的链接文本里用，否则
GitHubRepositoryName可能变成GitHubReposi+toryName，让人误读
overflow-wrap: break-word 更适合普通链接和英文段落
它优先保留单词整体，只在「整个单词放不下」时才从中间切开，对 URL 和驼峰命名更友好。
- 对
https://example.com/very/long/path，它倾向于在斜杠处换行（因斜杠是允许断点），而不是把very拆成ve+ry - 对
Supercalifragilisticexpialidocious这种长词，它先尝试整词换行；实在塞不下，才在音节附近断（浏览器实现略有差异，但比break-all合理） - 必须配合明确的宽度限制（如
width或max-width），否则没触发条件 - 现代写法推荐用
overflow-wrap: break-word，同时加word-wrap: break-word兼容老 IE
容易被忽略的兼容性和副作用
看似简单，但实际落地常踩坑：
立即学习“前端免费学习笔记（深入）”；
-
word-break: keep-all对中文有用，但对英文无效——它只阻止 CJK 字符换行，英文仍按空格断，别误以为能“锁住”所有单词 -
overflow-wrap在<pre class="brush:php;toolbar:false;"></pre>或white-space: pre下默认失效，得显式重置white-space: normal - Safari 14 之前不支持
overflow-wrap，必须保留word-wrap回退；iOS 14+ 已没问题 - 如果父容器用了
display: flex且没设flex-shrink: 1，子元素即使写了overflow-wrap也可能撑开容器——换行逻辑被 flex 布局压制了
真正要选哪个，得看内容是否允许被切碎：URL 和技术名词优先用 overflow-wrap: break-word；表格数据或监控日志这种「宁可难读也不能溢出」的，才上 word-break: break-all。别图省事全用 break-all，它不是万能兜底，而是特定场景的手术刀。
