现代项目必须用overflow-wrap: break-word替代已废弃的word-break: break-word；它需配合white-space: normal、明确宽度及min-width: 0（Flex/Grid中）才能生效，且与word-break是互补关系而非替代。
直接说结论：word-break: break-word 已被废弃，现代项目必须用 overflow-wrap: break-word 替代；word-break 本身只管“是否允许在词内断”，不管“要不要断”，它和 overflow-wrap 是互补关系，不是替代关系。
为什么设了 word-break 还不换行？常见失效原因
很多人加了 word-break: break-all 或 word-break: keep-all，文字依然溢出或死活不折行——问题往往不在 word-break 本身，而在它没机会起作用：
-
white-space: nowrap会彻底禁用自动换行，哪怕其他所有属性都写对也白搭 - 父容器没设
width或max-width，overflow-wrap就找不到“边界”，根本不会触发断行逻辑 - 在
display: flex或display: grid的子项里，flex item 默认min-width: auto，会阻止内容收缩，此时必须显式加min-width: 0或overflow: hidden - 表格单元格用了
table-layout: fixed却没给<td> 设 <code>width或min-width，样式会被锁死word-break 各值的真实行为差异
word-break不是“智能换行开关”，它只是定义断点策略的底层规则。不同取值影响的是“在哪能断”，而不是“要不要断”：-
word-break: normal：只在空格、连字符（-）、标点处换行；英文长单词（如 URL）直接溢出，不拆 -
word-break: break-all：无视语义，在任意两个字符之间都能断（a和b中间也能断），适合固定宽表格展示哈希值，但可读性差 -
word-break: keep-all：中文不断字，英文也不拆词，纯靠空格分隔；若遇到无空格长串（如https://example.com/verylongpathwithoutslash），照样溢出 -
word-break: break-word：已废弃，Chrome 89+ 完全忽略，Safari 行为不一致，别再用
中英文混排时怎么配 overflow-wrap + word-break？
中英文混排最常踩的坑，是误用
break-all导致中文也被乱切（比如“你好世界”变成“你好世
界”）。正确组合取决于场景：立即学习“前端免费学习笔记（深入）”；
- 通用正文段落（含 URL、英文术语）：
overflow-wrap: break-word; word-break: normal;—— 英文只在必要时断词，中文按字自然换行 - 表格窄列强制不溢出（如日志 ID 列）：
overflow-wrap: break-word; word-break: break-all;—— 先保布局，再兼顾可读性 - 纯中文+少量英文专有名词（如“React 组件”）：
overflow-wrap: break-word; word-break: keep-all;—— 中文不断，英文单词也不拆，靠overflow-wrap扛住超长串 - 想启用连字符（hyphenation）：
hyphens: auto;必须配合lang="en"属性，且仅 Firefox 支持较稳，Safari 基本无效
JS 动态设置时容易忽略的细节
用 JS 控制换行时，拼写和时机比 CSS 更敏感：
- DOM 设置必须驼峰：
el.style.wordBreak = 'break-all';（word-break会静默失败） - Vue/React 等框架中，首次渲染可能因响应式系统延迟，导致样式未及时应用；建议用
getComputedStyle(el).wordBreak检查是否真实生效 - 不要在
display: none元素上提前设换行样式，浏览器不计算布局，overflow-wrap无意义 - Flex/Grid 容器内动态插入文本后不换行？大概率缺了
min-width: 0—— 这个 fix 必须写进 CSS，JS 无法绕过
真正难的不是选哪个值，而是搞清“谁在控制断点”“谁在决定要不要断”“谁在限制宽度”。三个条件缺一不可，漏掉任何一个，
word-break就只是贴在 DOM 上的一行注释。 -
