overflow-wrap: break-word 仅在可换行上下文中生效，如 block 或 inline-block 元素；遇 white-space: nowrap、flex（默认 nowrap）或 table-cell 时失效，需配合 overflow: hidden、min-width: 0 及 IE 回退 word-wrap 才可靠工作。
overflow-wrap: break-word 为什么有时不生效
它只对「可换行的上下文」起作用，比如 display: block 或 inline-block 的元素；如果父容器是 white-space: nowrap、display: flex（默认 flex-wrap: nowrap）或 table-cell，这个声明会被无视。
实操建议：
- 先确认目标元素的
white-space没被设成nowrap或pre - 若在
flex容器里，给子项加flex-shrink: 1和min-width: 0，否则 flex 项默认不收缩，overflow-wrap就没机会触发 - IE 不支持
overflow-wrap，得用word-wrap: break-word回退（二者等价，但 IE 只认后者）
和 word-break: break-all 的关键区别
overflow-wrap: break-word 只在单词「整体放不下」时才折行，优先保持单词完整；word-break: break-all 则不管语义，强行在任意字符间切断，中文、英文长串都照切。
常见错误现象：用了 word-break: break-all 后，英文 URL 或邮箱被切成 exa…@gma…il.com，可读性崩坏。
立即学习“前端免费学习笔记（深入）”；
使用场景建议：
- 用户输入昵称、标题、摘要类文本 → 用
overflow-wrap: break-word - 日志输出、十六进制哈希值、无空格 Base64 字符串 → 才考虑
word-break: break-all - 中英文混排且含长英文单词时，
overflow-wrap更安全；纯中文基本不受影响（中文每个字都是天然断点）
配合 overflow 和 min-width 的典型写法
单靠 overflow-wrap 不能让溢出内容「隐藏+折行」，它只管「要不要折」，不管「溢出了怎么办」。必须搭配 overflow: hidden 或 auto 才能真正约束视觉范围。
一个稳定可用的组合：
text {
overflow-wrap: break-word;
word-wrap: break-word; /* 兼容 IE */
overflow: hidden;
min-width: 0; /* 关键！尤其在 flex/grid 中防弹性撑开 */
}性能提示：这些属性本身无渲染开销，但若容器频繁 resize（如响应式表格），大量启用 overflow-wrap 的单元格可能略微增加重排压力，不过日常场景无需担忧。
Chrome 125+ 对 overflow-wrap 的新限制
新版 Chrome 开始对 overflow-wrap: break-word 增加隐式条件：仅当容器有明确宽度（width、max-width 或受父级约束）时才生效；如果父容器是 width: fit-content 或 display: inline，它会退回到不折行行为。
容易踩的坑：
- 在
inline元素上直接写overflow-wrap→ 无效，必须先设display: inline-block - 用
fit-content包裹一段文字再加overflow-wrap→ 不折，得显式加max-width: 100% - 服务端渲染时，若 CSS 还没加载完，文字可能闪动溢出，建议配合
overflow: hidden做兜底
复杂点在于：它不是单纯失效，而是「有条件生效」，调试时得一层层查 computed width 和 display 类型，而不是只盯那行 CSS。
