overflow-wrap: break-word 仅对无空格的连续字符串生效，遇连字符、窄空格或 white-space 禁用时失效；flex 子项需加 min-width: 0 才能触发换行。
overflow-wrap: break-word 为什么有时不生效
它只对「不可分割的连续字符串」起作用，比如超长 URL、Base64 片段或无空格的哈希值。如果单词中间有连字符（-）或 Unicode 连接符，浏览器可能按语言规则保留断点，overflow-wrap: break-word 就不会强行切开。
常见错误现象：div 宽度固定但内容横向溢出，开发者加了 overflow-wrap: break-word 却没效果。
- 确认父容器有明确宽度（如
width: 300px或max-width），否则浏览器无“换行依据” - 检查是否被
white-space: nowrap或white-space: pre覆盖——这两个值会直接禁用换行 - 若内容含
- 在 Flex/Grid 容器中，子项默认不换行，需额外加
word-break: break-word或overflow-wrap: break-word
word-break vs overflow-wrap：该选哪个
word-break: break-all 是暴力方案：无视语义，只要超出就切，中文、英文、数字全照切；overflow-wrap: break-word 更克制：只在整词放不下时才断，优先保持单词完整性。
使用场景差异明显：
- 展示日志 ID、token、文件名等纯技术字符串 → 用
word-break: break-all，确保不撑破布局 - 显示用户输入的长链接或带连字符的英文术语 → 用
overflow-wrap: break-word，更易读 - 中英文混排正文（如评论区）→ 推荐
word-break: break-word（注意不是break-all），它对中文自动按字断，对英文仍保词义
Flex 容器里长单词不换行的典型解法
Flex 子项默认 min-width: auto，会抵抗压缩，导致即使写了 overflow-wrap 也不换行。这不是 CSS 失效，而是 Flex 的默认行为在“撑腰”。
实操建议：
- 给子元素加
min-width: 0，解除 Flex 的最小宽度保护 - 再叠加
overflow-wrap: break-word或word-break: break-word - 如果还无效，检查是否用了
flex: 1—— 它隐含min-width: 0，但某些旧版 Safari 需显式写
.container {
display: flex;
}
.item {
min-width: 0;
overflow-wrap: break-word;
}
兼容性与移动端特别注意点
Android WebView 和 iOS Safari 对 overflow-wrap 支持良好（Chrome 58+、Safari 10.1+），但老版本 iOS（word-wrap: break-word（overflow-wrap 的旧名）。
性能影响极小，但要注意：
- 在大量列表项中批量使用
word-break: break-all，可能略微增加重排计算量（不过日常几乎感知不到） - 部分安卓低版本浏览器对
overflow-wrap在table-cell中支持异常，此时换用word-break: break-word更稳 - 微信内置浏览器（X5 内核）对
overflow-wrap解析较严格，必须配合width+display: block才可靠
最常被忽略的是：写了样式却忘了父级有 overflow: hidden 以外的 overflow 值（比如 scroll 或 auto），此时换行会触发滚动条而非折行——得看具体容器是否允许内容“自然溢出”来决定要不要加 overflow: hidden。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
