应统一用 overflow-wrap: break-word，再按需配 word-break: normal 或 break-all；word-break: break-word 已废弃，Chrome 89+ 忽略、Safari 兼容差。
word-break 和 word-wrap（overflow-wrap）到底该用哪个？
直接说结论：word-break: break-word 已被废弃，现代写法应统一用 overflow-wrap: break-word，再配合 word-break: normal 或 word-break: break-all 按需微调。浏览器对 word-break: break-word 的支持不一致，Chrome 89+ 已完全忽略它，Safari 也仅部分兼容。
英文长单词强制换行的三种典型场景
不同场景下行为差异很大，不能一概而论：
-
纯英文段落含超长 URL 或哈希值：用
overflow-wrap: break-word+word-break: normal—— 只在必要时断词，优先保语义 -
表格内固定宽度单元格，内容不可溢出：加
word-break: break-all，无视词边界强行截断（比如abcdefghijklmnopqrstuvwxyz会在任意字母后换行） -
中英混排且需兼顾中文自动换行与英文合理断词：必须设
overflow-wrap: break-word，word-break保持默认normal，否则中文也会被错误拆开
常见错误：white-space 和 line-break 的干扰
很多人加了 word-break 还不生效，往往是因为其他 CSS 覆盖了换行逻辑：
-
white-space: nowrap会彻底禁用换行，哪怕其他属性全设对也无效 -
white-space: pre或pre-wrap会保留原始空格与换行符，但可能抑制自动断词 -
line-break: strict主要影响中文/日文断行规则，在英文场景基本无作用，别乱加
推荐最小安全组合：
立即学习“前端免费学习笔记（深入）”；
div {
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
}
Flex/Grid 容器里文字不换行？检查 flex-shrink
即使写了 overflow-wrap，在 display: flex 或 display: grid 子项中仍可能不换行——根本原因是默认 flex-shrink: 1 不起效，容器强行拉伸子项宽度。
- 给文字容器加
min-width: 0（flex item 的经典 fix） - 或显式设置
flex-shrink: 1+overflow: hidden - Grid 子项同理，需设
min-width: 0或overflow: hidden
没这一步，overflow-wrap 就是摆设。
