17370845950

应统一用 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 就是摆设。