word-break 与 overflow-wrap 核心差异在于断行逻辑：前者按语言规则或强制切字（如 break-all），后者仅在溢出时优先保单词完整再折行；混用易致跨浏览器渲染不一致。
word-break 和 overflow-wrap 的行为差异到底在哪
这两个属性看着都管“断行”，但实际触发条件和浏览器处理逻辑完全不同，混用容易导致文字在 Chrome 里正常、Firefox 里挤成一团，或 Safari 下突然多出多余换行。
简单说：word-break: break-all 是“无差别切字”，哪怕英文单词中间也硬砍；overflow-wrap: break-word 是“实在放不下才折”，优先保单词完整，只在长不可分字符串（比如超长 URL 或连续无空格中文段）里找位置断。
-
word-break: normal：默认值，按语言规则断行（中文可任意断，英文按单词） -
word-break: break-all：无视语义，强制在任意字符间断（含英文单词内部），适合表格窄列但牺牲可读性 -
overflow-wrap: anywhere：比break-word更激进，允许在任意空白符或连字符后断，且支持在长单词内主动插入断点（现代浏览器支持较好） - 别写
word-break: break-word—— 这是已废弃的旧写法，CSS 规范里根本没这值，部分浏览器兼容但行为不一致
中文场景下该选哪个：overflow-wrap 还是 word-break
纯中文内容基本不会遇到“单个词太长”的问题，因为每个汉字都是天然断点。这时候 word-break 几乎没作用，反而是 overflow-wrap 在混合内容（比如带英文路径、邮箱、URL 的提示文案）时更可靠。
- 如果容器宽度固定且含大量英文/数字串（如日志 ID：
abc123def456gh789），用overflow-wrap: break-word更安全 - 若需严格限制单行显示（如标签 badge）、宁可把英文单词从中间劈开，才考虑
word-break: break-all - 中文段落里加了
white-space: nowrap？那两个属性都无效——先去掉它，或改用white-space: normal
Chrome/Firefox/Safari 表现不一致的几个坑
最常踩的是把 overflow-wrap: break-word 当万能解，结果在 Firefox 里对某些长 URL 不生效，或者 Safari 对 anywhere 支持滞后（iOS 15.4+ 才稳定）。
将 LaTeX（.tex）学术论文转换为 Word（.docx），支持可编辑的 OMML 公式、原生 Word 表格、嵌入图形、IEEE 双栏排版及参考文献
- Firefox 旧版（overflow-wrap: anywhere 支持弱，建议降级为
break-word并配合word-break: break-all回退 - Safari 对中文 + 英文混排的
overflow-wrap处理较保守，有时需要额外加hyphens: auto（但注意它对中文无效，只影响英文） - 所有浏览器对
pre元素内的文本默认禁用自动断行，必须显式设white-space: pre-wrap才能让overflow-wrap生效
实际项目中推荐的最小可用组合
不堆砌，就两条 CSS 覆盖 95% 场景：
text {
overflow-wrap: break-word;
word-break: keep-all;
}
keep-all 是关键：它让中文保持“不断开单字”的预期（虽然中文本来就不需要它），同时避免 break-all 污染全局；而 break-word 在真正需要时兜底。如果目标环境明确支持现代特性（如 Electron、iOS 16+ App），可换成：
text {
overflow-wrap: anywhere;
word-break: keep-all;
}
注意：不要给父容器设 display: flex 后再指望子元素靠 overflow-wrap 断行——flex item 默认是 min-width: auto，会撑开容器。得加 min-width: 0 或 overflow: hidden 才行。
断行不是样式问题，是渲染上下文问题。浏览器看到什么、怎么算“放不下”、要不要尊重语言边界——这些细节藏在属性组合和父级约束里，调的时候得盯着 DevTools 的 Layout 面板看真实尺寸，而不是只改一个属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
