word-break: break-all 并非万能开关，仅在父容器有明确宽度、子元素非inline、未被white-space: nowrap覆盖、Flex/Grid中子项设min-width: 0时才生效；缺一即失效。
word-break 不是“强制换行”的万能开关，它只在特定结构下生效——父容器必须有明确宽度、子元素不能是 inline 元素、不能被 white-space: nowrap 覆盖。
为什么加了 word-break: break-all 还是不换行？
最常见原因是结构不满足触发条件。浏览器不会因为写了这个声明就自动断行，它需要一个“可压缩”的上下文。
- 父容器没设
width或max-width（比如只写了flex: 1却没限制最大宽度） - 目标文本放在
<span></span>、<a></a>这类inline元素里，而没加display: block或display: inline-block - 上层样式链中存在
white-space: nowrap，它的优先级高于word-break - 在
display: flex或display: grid容器中，子项默认带min-width: auto，会锁死收缩能力
word-break: break-all 在 Flex/Grid 中失效怎么办？
这不是 bug，是 Flex 布局的默认行为：子项优先保持“最小内容宽度”，宁可撑开也不换行。
- 给子元素加
min-width: 0（推荐，语义清晰） - 或加
overflow: hidden（副作用是隐藏滚动，但能松开min-width锁） - 同时确认子元素不是
white-space: nowrap，否则断行指令直接被忽略 - 如果用的是
grid，同理，也要对网格项设min-width: 0
该选 word-break: break-all 还是 overflow-wrap: break-word？
两者解决的是不同问题，混用反而导致行为不可预测。
立即学习“前端免费学习笔记（深入）”；
- 要保留英文单词可读性、处理 URL 或 Base64 字符串 → 只用
overflow-wrap: break-word - 要绝对防止溢出、且内容是 ID、哈希值、日志路径等非语义文本 → 只用
word-break: break-all - 中文为主 + 少量英文混排 → 可配
word-break: keep-all防止中文被切，再加overflow-wrap: break-word处理英文长词 - 别写成
word-break: break-all; overflow-wrap: break-word;—— 浏览器可能按任意顺序执行，Safari 旧版尤其容易表现不一致
响应式场景下怎么安全控制换行？
小屏必须断，大屏可以自然流，靠 @media 切换策略最稳妥。
- 移动端（
max-width: 768px）启用overflow-wrap: break-word，兼顾可读与防溢出 - 桌面端恢复
word-break: normal和overflow-wrap: normal - 如果用了
white-space: pre-line保留用户输入的\n，记得在响应式规则里一并继承，否则换行符会被吞掉 - 避免用
word-break: break-all覆盖全局，它对中英文混排的破坏性比你预想的更隐蔽
真正难的不是加哪条 CSS，而是判断当前容器是否具备断行所需的“压缩前提”——宽度约束、显示模式、空白处理、布局上下文，四个条件缺一不可。漏掉任何一个，word-break 就只是个躺在样式表里的无效声明。
