优先用 overflow-wrap: break-word 处理长URL或英文术语溢出，它智能断词保语义；中文默认可字间换行，无需干预，避免误用 break-all 破坏可读性。
直接说结论：别只盯着 word-break 或 overflow-wrap 单独用，得先分清你面对的是“长单词溢出”还是“CJK文本被乱切”，再选对属性、配对 white-space、避开 break-word 这个已废弃的坑。
遇到长URL或英文技术术语溢出容器，优先用 overflow-wrap: break-word
这是最安全的第一选择。它只在万不得已时才断词——比如一个 50 字符的 URL 塞不进 200px 宽度的卡片里，浏览器会先尝试在 / 或 . 后换行；只有连这些位置都没有时，才会在字母间硬切。
-
overflow-wrap: normal（默认）：不干预，溢出就溢出 -
overflow-wrap: break-word：智能兜底，保宽度优先，但尽量不伤语义 - 别用
word-wrap: break-word：虽然还能工作，但它是 CSS3 时代的遗留写法，W3C 已标记为过时，现代项目应统一用overflow-wrap - 注意：它对纯中文无效——中文本来就能在字间换行，
overflow-wrap不起作用
需要强制在任意字符处断行（比如代码块、日文排版），才用 word-break: break-all
这不是“换行优化”，而是“布局强控”。一旦启用，break-all 会无视语言规则，在每个字符后都插入潜在断点。
- 适合场景：
<pre>里的日志路径、表格中固定宽度的 ID 列、调试用的 base64 字符串 - 危险信号：用在正文段落里，
123456789可能变成12+34+56，用户根本读不懂 -
word-break: keep-all是它的反面，只对 CJK 生效：韩文“안녕하세요”不会被切开，但英文单词仍按空格换行——适合多语言混合但需保护韩/日词根的界面 - Safari 在 iOS 13 及更早版本对
keep-all支持不稳定，上线前务必真机测
white-space 是前置开关，不设对，后面全白搭
word-break 和 overflow-wrap 都是在 white-space: normal（默认）前提下起效的。如果你写了 white-space: nowrap，那这两个属性直接失效——文本宁可撑爆容器也不换行。
立即学习“前端免费学习笔记（深入）”；
- 常见误配：
white-space: pre-line+overflow-wrap: break-word→ 空行保留，但长单词照样溢出，因为pre-line仍禁止在单词内断行 - 安全组合：
white-space: normal（显式声明，别依赖默认） +overflow-wrap: break-word - 表格单元格要额外加
max-width：光靠overflow-wrap不够，td { max-width: 120px; overflow-wrap: break-word; }才真正可控
中文换行本身不是问题，乱切才是——警惕 break-all 对中文的副作用
浏览器对中文默认就在字间换行，所以多数情况下你根本不需要动 word-break。但一旦加了 break-all，它会把“中华人民共和国”切成“中华人”+“民共”+“和国”，破坏语义和可读性。
- 真正该管的，是中文里混入的英文长词，比如“React组件Props类型定义”中的
Props——这时用overflow-wrap: break-word更精准 - 如果必须禁中文换行（如标签云里的单个标签），用
white-space: nowrap+text-overflow: ellipsis，而不是word-break: keep-all - 移动端小屏下，
break-all导致的断字错觉比溢出更伤体验——用户宁愿横向滚动，也不愿猜被切掉的字
