word-break: keep-all 在中日文里不生效的常见原因并非属性失效，而是容器宽度不足、父级设置 white-space: nowrap 或 display: inline-block 且未设 max-width，导致浏览器被迫在字符间折行；此外，keep-all 不禁止标点与汉字间断行，也不影响 white-space: pre-line/pre-wrap 等覆盖行为。
word-break:keep-all 在中文/日文里不生效的常见原因
很多人以为 word-break:keep-all 能让中文、日文整词不换行，结果发现还是断开了——这通常不是属性失效，而是容器宽度不够 + 父级设置了 white-space: nowrap 或 display: inline-block 且未设 max-width，导致浏览器被迫在字符间折行以满足布局约束。
更隐蔽的问题是：某些中文字体（如部分 Noto Sans CJK 变体）或系统渲染层会把标点、全角空格、零宽空格等当作潜在断点，keep-all 并不禁止这些位置换行。它只禁用“CJK 字符之间”的断行，但不干预标点与汉字之间的边界。
- 检查是否意外继承了
white-space: pre-line或pre-wrap，它们会覆盖keep-all的行为 - 确认父容器没有
flex-shrink: 1或table-layout: fixed导致子元素被压缩后强制断字 - 用 DevTools 的 Layout 面板查看实际计算出的
available width，常比预期小 1–2px
overflow-wrap:break-word 对英文 URL 换行却破坏可点击性的处理
设置 overflow-wrap:break-word 后，URL 常在斜杠 / 或点号 . 处断开，用户复制粘贴时可能漏掉一部分，甚至生成无效链接。这不是 bug，而是该属性默认优先在“允许断点”（如 -、/、.）处换行，而非任意字符。
真正可控的方案是组合使用：
- 对纯 URL 容器加
overflow-wrap:anywhere（CSS Text Level 4），它允许在任意字符间断行，包括字母数字之间，避免破坏语义分隔符 - 若需兼容旧浏览器（如 Safari 15.6 以下），退而求其次用
word-break:break-all+hyphens:none防止连字符干扰 - 绝对不要只写
word-wrap:break-word—— 这是过时别名，且在部分 Android WebView 中行为不稳定
多语言混合文本（如中英混排）该选哪个属性
中英混排最常踩的坑是：用 word-break:break-all 导致 “React 组件” 变成 “React 组” + “件”，或者 “high-performance” 被切成 “high-perfor” + “mance”。这不是错，是它本来的设计目标——无差别断字。
真实场景下应按内容语义分级控制：
- 标题/按钮文字：用
word-break:keep-all+overflow:hidden+text-overflow:ellipsis，宁可截断也不拆词 - 正文段落：用
overflow-wrap:break-word，它对中文自动按字断（因无空格），对英文仍尽量保单词完整 - 代码块/密钥/Token：必须用
word-break:break-all，否则 Base64 字符串会撑破容器
注意：overflow-wrap 不影响 CJK 文本的断行粒度，它只解决“单个超长 token 溢出”，而 word-break 才真正决定“CJK 字符是否可被拆开”。
IE11 和旧版 Safari 的兼容写法陷阱
IE11 完全不认识 overflow-wrap，Safari 14 之前对 anywhere 值支持不全，但直接堆砌所有别名反而会引发冲突：
错误写法：word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; —— 最后一个会覆盖前两个，导致中英文都粗暴断字。
正确渐进式写法：
.text-safe {
/* 兜底：IE11 及更老 */
word-wrap: break-word;
/* 主力：现代标准 */
overflow-wrap: break-word;
/* 补充：仅当需要强制断CJK时才加，且放最后 */
word-break: keep-all;
}
关键点：把 word-break 放在最后，且只用 keep-all 或 normal；break-all 必须单独封装到 class，不能和 overflow-wrap 混用——它们的触发逻辑根本不同，叠加等于放弃控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
