Safari 和 Firefox 中 word-break: break-all 存在换行偏移问题：Safari 按 glyph box 计算断点致 1–2px 错位，Firefox 按 grapheme cluster 在 Unicode 标点处多断行；keep-all 在旧版 Safari 等中失效需配合 overflow-wrap: normal；混用 break-all 与 break-word 时 Safari 优先级异常；textarea 中 break-all 无效需用 contenteditable 替代；所有行为均受字体度量影响。
word-break: break-all 在 Safari 和 Firefox 中的换行偏移问题
在 Safari（尤其是 iOS 16+ 和 macOS Ventura 后版本）中，word-break: break-all 渲染中文或连续英文时，常出现 1–2px 的行高错位或断点位置偏差；Firefox 则可能在含 Unicode 标点（如全角顿号、破折号）的混合文本中多断一次行。
这不是 bug，而是 WebKit 和 Gecko 对「字符边界测量」的实现差异：Safari 按 glyph box 计算断点，Firefox 更倾向按 Unicode grapheme cluster。实际影响是视觉错行或容器高度不稳定。
实操建议：
- 对纯展示型容器（如日志预览、密钥显示），加
line-height: 1.4并固定font-size，避免因断点浮动引发重排抖动 - 若需像素级对齐，在 Safari 中补一句
-webkit-line-break: after-white-space;（仅限 iOS 15.4+ / Safari 15.6+） - 避免在
flex或grid子项上单独用word-break: break-all，务必搭配min-width: 0防止弹性项撑宽容器
中文场景下 keep-all 不生效的兼容写法
word-break: keep-all 本意是禁止中文/日文/韩文在字间换行，但在旧版 Safari（≤14）、部分 Android WebView（Chrome 80–90）中会被忽略，导致「你好世界」被拆成「你好
世界」。
这不是属性不支持，而是这些引擎将 CJK 字符视作「可断行单元」，除非显式禁用所有断点逻辑。
实操建议：
- 必须同时声明
word-break: keep-all和overflow-wrap: normal（而非break-word），否则后者会覆盖前者的约束 - 对 iOS Safari 13–14，追加
-webkit-text-stroke: 0.1px transparent可触发更严格的字形边界判定（副作用极小） - 若内容来自用户输入且含换行符，再加
white-space: pre-line，否则keep-all对回车无效
与 overflow-wrap: break-word 混用时的优先级陷阱
很多人以为 word-break: break-all + overflow-wrap: break-word 是“双重保险”，结果发现 Chrome 正常、Safari 却完全不换行——这是因为 Safari（WebKit）中 overflow-wrap: break-word 的优先级高于 word-break，一旦它判定「可以靠空格换行」，就直接跳过 break-all 的强制逻辑。
这是规范未明确定义的实现分歧：Blink 引擎以 word-break 为最终断行策略，WebKit 则把 overflow-wrap 当作更高阶的布局指令。
实操建议：
- 不要混用二者；明确场景选其一：
break-word用于 URL/英文段落，break-all用于 Base64/二进制字符串等绝对不可读的长串 - 在需要 Safari 兼容
break-all行为时，必须移除所有overflow-wrap声明，并补word-wrap: break-all（注意不是break-word） - 测试时用真实长串（如
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx）而非 lorem ipsum，否则无法暴露 Safari 的空格 fallback 逻辑
移动端 textarea 中的换行失效问题
在 iOS Safari 的 <textarea></textarea> 里设 word-break: break-all 几乎无效，输入长无空格字符串时仍溢出或横向滚动——这是 WebKit 对表单控件的硬编码限制，不走通用文本渲染管线。
这不是 CSS 能解决的问题，而是原生控件行为。
实操建议：
- 改用
contenteditablediv 替代textarea，并手动绑定input事件同步值到隐藏input元素 - 对必须用
textarea的场景，加resize: horizontal并配合 JS 监听scrollWidth > clientWidth，动态插入\n实现软换行 - Android WebView 中类似问题更隐蔽：需检测
getComputedStyle(el).wordBreak === 'break-all'是否返回空字符串，来判断是否真正生效
最易被忽略的一点：所有这些属性都依赖字体度量（font metrics）。同一段 CSS 在系统字体（如 -apple-system）和自定义 Web Font 下，断点位置可能差 1–3 个字符——上线前务必在真机上用目标字体实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
