推荐使用 overflow-wrap: break-word 解决长单词溢出，它优先保持单词完整，仅在必要时断行；而 word-break: break-all 会无差别切割，影响可读性。
长单词撑破容器的典型表现
页面里一段文字突然横向滚动，或者直接溢出父容器边界，尤其在英文、URL、邮箱或代码片段场景下特别明显。这不是布局写错了，而是浏览器默认对连续非空白字符（比如 verylongwordwithoutspaces）不主动断行。
word-break: break-all 和 word-break: keep-all 的区别
word-break 是最直接的解法，但两个常用值行为差异很大：
-
word-break: break-all：强制在任意字符间断行，哪怕把hello拆成hel和lo—— 适合纯展示、不强调可读性的场景（如日志、API 响应体） -
word-break: keep-all：中文/日文正常断行，但对英文、数字串完全不处理，等同于没设 —— 别用它来解决溢出问题 - 真正兼顾可读与防溢出的是
overflow-wrap: break-word（旧名word-wrap: break-word），它只在必要时才在单词内断行，优先保持完整单词
为什么推荐 overflow-wrap 而不是 word-break
因为 overflow-wrap 更“懂语义”：它先尝试在空格、连字符、标点后换行；实在没地方了，才在长单词中间切一刀。而 word-break: break-all 是无差别切割，容易让 https://example.com/very-long-path-here 变成难以识别的碎片。
实操建议：
- 对用户输入、URL、邮箱等混合内容，用
overflow-wrap: break-word - 配合
word-break: break-word（注意：这是另一个已废弃但部分浏览器仍支持的值，别用） - 必须加
max-width或固定宽度容器，否则overflow-wrap不生效 - 移动端要额外加
hyphens: auto（需前缀）提升可读性，但注意 Safari 对非拉丁语系支持有限
Flex/Grid 容器里长单词失效的坑
在 display: flex 或 display: grid 的子项中，overflow-wrap 经常不起作用 —— 因为 flex item 默认不收缩，会优先撑开自身。
解决办法很简单：
- 给该元素加
min-width: 0（flex）或min-width: 0/min-height: 0（grid） - 或者显式设
flex-shrink: 1 - 别依赖
white-space: normal，它默认就有，关键是让容器允许压缩
这个点很容易被忽略：样式写了，也加了 overflow-wrap，但就是不换行 —— 八成卡在 flex 的默认最小尺寸上了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
