优先用 overflow-wrap: break-word，它只在单词超长且无空格时断行，保持语义完整；word-break: break-all 会无差别切分字符，仅适用于哈希值等纯技术字符串。
长单词撑破容器时，该用 word-break 还是 overflow-wrap
直接结论：overflow-wrap: break-word 是绝大多数场景的默认安全选择；word-break: break-all 是高风险操作，仅在明确需要“无视语义强制切字”的少数情况才启用。
overflow-wrap: break-word 为什么更安全
它只在整词无法放入当前行、且无空格可换行时才介入断词，优先保全单词完整性。对中英文都友好，不会破坏 URL 可点击性或技术术语可读性。
- 必须配合有明确宽度限制的容器（如
max-width: 300px），否则无从判断“是否溢出” -
break-word在现代浏览器中已完全取代旧名word-wrap: break-word，但为兼容 IE10+，可双写：overflow-wrap: break-word; word-wrap: break-word; - 不改变
min-content宽度计算——容器仍按最长单词原始长度估算，避免布局意外收缩
word-break: break-all 的真实适用场景很窄
它不是“让长单词换行”，而是“允许在任意字符间插入换行点”，包括中文字符之间、URL 的斜杠前后、甚至变量名中间。这会带来语义断裂和可访问性问题。
- 适合显示日志、哈希值、路径片段等无需语义连贯的纯技术字符串，例如：
abc123def456789塞进固定宽表格列 - 在多语言混排中慎用：它会让
日本語English变成日本語En…或…glish，CJK 字符被逐字切断 - 与
white-space: nowrap配合做单行截断时，不如直接用text-overflow: ellipsis可靠
容易被忽略的关键细节
overflow-wrap 和 word-break 不是互斥开关，而是存在优先级：如果同时设置 word-break: break-all 和 overflow-wrap: break-word，前者会完全覆盖后者的行为。另外，hyphens: auto 在支持的浏览器中（Chrome 80+、Safari 14.1+）配合 lang="en"，能实现词典级连字符断词，比任何强制断行都更专业——但它不解决无连字符的超长 URL 问题，此时仍需 overflow-wrap 兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
