overflow-wrap: break-word 仅在单词无法换行时才断词，需配合明确宽度限制，兼容写法为 overflow-wrap: break-word; word-wrap: break-word；而 word-break: break-all 无条件切字，优先级高于 overflow-wrap，两者共存时后者无效。
overflow-wrap: break-word 只在真撑不开时才断词
它不会主动破坏单词结构，而是等浏览器发现“这个单词放不进当前行，又没空格可换行”，才在单词内部找一个能断的位置（比如 URL 的 . 或 / 前后）。对英文、URL、技术术语都更友好，用户点击链接或复制变量名时不会出错。
必须配合有明确宽度限制的容器，比如 max-width: 300px 或 width: 200px，否则它根本不知道“撑不开”是什么意思。
现代写法是 overflow-wrap: break-word，但为兼容 IE10+，建议双写：overflow-wrap: break-word; word-wrap: break-word;。注意 word-wrap 是旧名，已废弃，仅作兼容用。
word-break: break-all 是无条件切字
它不管语义、不管可读性，只要到容器右边界，就在当前字符后面硬切——哪怕切在 https:// 中间，或把 user_id 切成 user_ 和 id。中文、日文、英文、数字全一视同仁。
适用场景非常窄：
- 显示哈希值（
sha256:abc123def456...） - 日志表格里固定宽列的原始路径片段
- 调试用的 Base64 字符串
和 white-space: nowrap 一起用做单行截断，效果反而不如 text-overflow: ellipsis 可靠；多语言混排时还可能把 日本語English 切成 日本語En…，破坏阅读节奏。
两者同时设置时，word-break 会直接覆盖 overflow-wrap
这是最容易被忽略的坑：如果 CSS 里写了 word-break: break-all; overflow-wrap: break-word;，后者完全无效。浏览器只认 word-break 的规则。
它们不是开关组合，而是存在明确优先级：word-break 控制“能不能断”，overflow-wrap 控制“要不要断”。前者更强，后者更柔。
真正需要兼顾布局安全与可读性的场景（比如用户评论含 URL），应优先用 overflow-wrap: break-word；只有当它仍导致溢出（例如极窄列 + 超长无分隔符字符串），才考虑局部加 word-break: break-all，且务必限定作用范围，避免污染全局文本流。
hyphens: auto 是比两者都更优的断词方案，但有局限
在 Chrome 80+、Safari 14.1+ 中，配合 lang="en" 和 hyphens: auto，能实现基于词典的连字符断词（如 supercalifragilistic-），语义最自然。
但它对无连字符的超长 URL、数字串、代码标识符完全无效——这些情况仍得靠 overflow-wrap: break-word 兜底。
别指望它在所有浏览器生效：Firefox 需要额外前缀 -moz-hyphens: auto，而 IE 已不支持。所以它适合正文段落，不适合通用组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
