word-break: break-all 会强制在任意字符间断行，导致中文被逐字拆分；应优先用 overflow-wrap: break-word 处理中英混排，keep-all 在旧版 Safari 中失效，需配合 white-space: pre-line 等措施确保兼容性。
word-break: break-all 强制断中文，每个字都成断点
这不是 bug，是 break-all 的设计本意：它无视语言规则，在任意字符间插入断点。中文每个汉字宽度固定、语义独立，break-all 会让「你好世界」在「你」「好」「世」「界」之间任意拆开，视觉上像打散的字块，尤其在窄容器中容易出现单字孤悬、行尾留白突兀等问题。
常见错误现象：表格单元格里中文标题被切成「设」「置」「页」「面」四行；移动端卡片文字底部对不齐，高度跳变。
- 别用
break-all处理纯中文或中英混排标题、按钮文字 - 若必须限制宽度，优先用
overflow-wrap: break-word—— 它对中文更友好，只在必要时断（比如超长英文 URL 或无空格字符串），中文仍保持自然按字换行 - 配合
line-height和固定font-size，能减少因断点浮动导致的重排抖动
word-break: keep-all 在旧版 Safari 中根本不起作用
你以为写了 word-break: keep-all 就能锁住中文不断字？在 iOS Safari ≤14、部分 Android WebView（Chrome 80–90）里，这个声明大概率被忽略——「你好世界」照样被拆成两行。
原因不是属性不支持，而是这些引擎把 CJK 字符默认当成「可断单元」，除非你同时堵住所有退路。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
overflow-wrap: normal（不是break-word），否则后者会覆盖前者的约束 - iOS Safari 13–14 可加
-webkit-text-stroke: 0.1px transparent触发更严格的字形边界判定 - 如果内容含用户输入的换行符，还得补一句
white-space: pre-line，否则keep-all对回车无效
混用 overflow-wrap 和 word-break 时，Safari 会“选边站队”
写成 word-break: break-all; overflow-wrap: break-word; 想双保险？Safari（WebKit）会直接忽略 break-all —— 因为它认定 overflow-wrap: break-word 已经能处理换行，就不往下执行 word-break 的逻辑了。
结果就是：Chrome 正常断，Safari 完全不换，文字撑出容器。
- 要么只用
overflow-wrap: break-word（推荐，语义清晰、兼容性好） - 要么只用
word-break: break-all，但必须确认场景允许破坏单词完整性 - 真要混用，把
overflow-wrap改成anywhere（CSS Text Level 4），它和break-all行为接近且优先级明确，不过注意 Firefox 120+、Chrome 125+ 才稳定支持
字体度量差异让断点位置“看起来不准”
同一段中文，在 Safari 和 Firefox 里断行位置差 1–2px，甚至同一行在 Safari 里多断一次——这往往不是 CSS 写错了，而是底层渲染机制不同：Safari 按 glyph box 计算断点，Firefox 按 grapheme cluster；而 glyph box 宽度受字体 hinting、subpixel 渲染影响，实际像素位置会漂移。
这种偏移在等宽字体（如 monospace）或小字号下更明显，会导致 flex 子项高度不一致、border 对不齐等连锁问题。
- 对日志、密钥等纯展示型文本，加
line-height: 1.4+ 固定font-size，弱化视觉错位感 - iOS 15.4+ / Safari 15.6+ 可试
-webkit-line-break: after-white-space，强制按空白符后断行，减少 glyph 级浮动 - 避免在
flex或grid子项上单独设word-break: break-all，务必加min-width: 0防止弹性项撑宽容器
