word-break: break-all 在现代浏览器中表现一致，但 IE/Edge 旧版存在兼容问题：需显式设置 width/max-width、避免用于 inline 元素、IE8–9 需回退 word-wrap: break-word。
word-break: break-all 在 Chrome/Firefox/Safari 中表现一致，但 IE/Edge 旧版有 bug
现代浏览器对 word-break: break-all 的实现基本统一：遇到容器边界就断开任意字符，包括英文单词中间、数字串、Base64 等。但 IE10 及更早版本（尤其是 IE9）存在两个典型问题：keep-all 对英文无效，而 break-all 在某些 inline 元素中可能不触发换行，尤其当父容器未设置 width 或 max-width 时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须为应用
word-break: break-all的元素显式声明width或max-width，否则 IE 下可能完全不生效 - 避免在
display: inline元素上单独使用；改用inline-block或block - IE8–IE9 需搭配
word-wrap: break-word回退（虽语义不同，但能兜底防溢出）
word-break: keep-all 对中文有效，但英文和混合文本要小心
word-break: keep-all 的设计目标是让 CJK 文本不被拆开——这点在 Chrome/Firefox/Safari 中基本可靠。但它的副作用常被忽略：对非 CJK 文本（如英文、数字），它等价于 normal，即只在空格/连字符处换行。这意味着如果一段文字里混着中文和长英文 URL，keep-all 会让中文“粘”住不换，但英文 URL 仍可能溢出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯中文表格单元格可用
word-break: keep-all+white-space: nowrap组合保完整性 - 含 URL 或英文单词的混合内容，不要单独依赖
keep-all；应叠加overflow-wrap: break-word - Safari 在 iOS 13–14 上对
keep-all的断行判断略保守，偶尔多占一行，需配合line-height微调
overflow-wrap: break-word 是更安全的跨浏览器 fallback
虽然标题问的是 word-break，但实际项目中，真正解决“不溢出”问题的主力往往是 overflow-wrap: break-word（word-wrap: break-word 是其别名）。它比 break-all 更克制：先尝试单词间换行，实在塞不下才拆单词。所有主流浏览器（包括 IE6+）都支持 word-wrap，而 overflow-wrap 在 Safari 14.1+、Chrome 90+ 等新版中推荐优先使用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写法上坚持双写：
overflow-wrap: break-word; word-wrap: break-word;，兼顾新老环境 - 它对中文效果有限（CJK 本身易断），但对英文 URL、长变量名、邮箱地址等特别友好
- 注意：若同时设了
white-space: nowrap，overflow-wrap会被压制失效——二者逻辑冲突
移动端 WebView 和微信内置浏览器要单独验证
Android WebView（尤其基于旧版 Chromium）和微信 X5 内核对 word-break 的支持存在碎片化。例如，X5 内核在 Android 10 上对 break-all 的断行位置偶发偏移 1px，导致视觉错位；iOS WKWebView 则对 overflow-wrap: anywhere（CSS Text Level 4）完全不识别。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 真机测试不能省：用真实安卓机（尤其华为/小米旧机型）和 iOS 微信打开，检查窄容器内长文本是否截断或撑宽
- 避免依赖
anywhere值，目前兼容性太差；坚持用break-word或break-all - 对关键卡片类组件，加一层
text-overflow: ellipsis+overflow: hidden作为最后防线
最常被忽略的一点：这三个属性都依赖块级上下文生效。如果父容器是 display: flex 且未设 flex-shrink: 1，子元素即使写了 word-break 也可能因 flex 伸缩机制而拒绝换行——得先管住 flex 容器本身。
