word-break 单独使用不可靠，必须搭配 overflow-wrap 并约束容器尺寸；推荐双写 overflow-wrap: break-word 和 word-wrap: break-word 作为跨浏览器主力方案。
中英文混排时，word-break 单独用基本不可靠——必须搭配 overflow-wrap 并显式约束容器尺寸，否则 Safari、Firefox、旧版 Edge 都会出问题。
为什么 word-break: break-all 在混排中常失效
它在 Chrome 里能硬切英文单词，但在 Safari（尤其是 iOS 15.4 前）和 Firefox 中，遇到中英文交界处（如「版本v1.2.3」）可能不触发断行；更麻烦的是，IE/Edge 旧版要求父容器必须有 width 或 max-width，否则整个属性被忽略。另外，display: inline 元素上设 break-all 在 IE9–10 下完全不生效。
实操建议：
- 永远为应用
word-break: break-all的元素设置width或max-width（哪怕只是max-width: 100%） - 避免直接作用于
span等inline元素；改用display: inline-block或display: block - IE8–IE9 必须回退：
word-wrap: break-word（虽然语义不同，但能兜底防溢出）
word-break: keep-all 对中文“保形”但对英文没用
keep-all 的设计目标是让 CJK 字符不被拆开，但它对英文、数字、URL 完全放行——等价于 normal，只在空格或连字符处换行。结果就是「你好world123456789」里中文粘着不动，英文长串直接溢出。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 纯中文表格单元格可用
word-break: keep-all+white-space: nowrap组合保完整性 - 含 URL、邮箱、路径的混排内容，不要单独依赖
keep-all；必须叠加overflow-wrap: break-word - iOS Safari 13–14 需额外加
-webkit-text-stroke: 0.1px transparent才能激活严格字形判定
真正跨浏览器稳定的写法是双保险组合
单靠 word-break 没法覆盖所有场景。overflow-wrap: break-word（及其别名 word-wrap: break-word）才是主力：它先尝试空格换行，实在塞不下才拆单词，且 IE6+ 都支持。Safari 和 Firefox 对它的实现一致性远高于 word-break。
实操建议：
- 坚持双写：
overflow-wrap: break-word; word-wrap: break-word; - 禁用
white-space: nowrap——二者逻辑冲突，一旦设了，overflow-wrap直接失效 - 若内容来自用户输入且含换行符，补一句
white-space: pre-line，否则keep-all对回车无效 - 移动端 WebView（尤其微信内置浏览器）必须单独验证，iOS 14 及以下对
overflow-wrap: anywhere支持极差，别用
Safari 和 Firefox 的换行偏移问题怎么压
Safari 按 glyph box 计算断点，Firefox 按 grapheme cluster，在中英文混排时容易出现 1–2px 错位或多余断行。这不是 bug，是底层字体度量差异。
实操建议：
- 对日志、密钥等展示型容器，固定
font-size并设line-height: 1.4，减少重排抖动 - iOS 15.4+ / Safari 15.6+ 可加
-webkit-line-break: after-white-space微调断点位置 - 避免在
flex或grid子项上单独用word-break: break-all；务必加min-width: 0防止弹性项撑宽容器
最常被忽略的一点：所有这些属性在 pre 元素里默认不生效，必须显式设 white-space: pre-wrap 才能让 overflow-wrap 起作用。
