word-break: break-all 仅在块级元素、父容器有明确宽度（如max-width）、且未被white-space: nowrap覆盖时生效；flex/grid中需设min-width: 0或overflow: hidden才能触发断行。
word-break: break-all 什么时候能强制断行
它只在块级元素、父容器有明确宽度（width 或 max-width）、且未被 white-space: nowrap 覆盖时才生效。不是写了就起作用，漏掉任一条件都会“看起来没效果”。
常见错误现象：div 里放了超长 URL，加了 word-break: break-all 却依然横向溢出；检查 computed styles 会发现该声明被标记为“inactive”，大概率是父容器没设宽度，或元素本身是 span 这类 inline 元素。
- 必须确保父容器有
max-width（比如max-width: 300px） - 子元素若为
span、a等 inline 元素，需额外加display: inline-block或display: block - 不能和
white-space: nowrap同时存在——后者优先级更高，会直接禁用所有自动换行
Flex/Grid 布局中 break-all 失效的真正原因
在 display: flex 或 display: grid 容器里，子项默认带 min-width: auto，这个值会阻止内容收缩，导致即使写了 word-break: break-all，浏览器也宁愿撑开容器也不换行。
这不是 bug，是 Flex 的设计逻辑：子项优先保持“最小内容宽度”，而不是服从断行指令。
- 解决方法一：给子元素加
min-width: 0 - 解决方法二：加
overflow: hidden（副作用是隐藏滚动，但能松开 min-width 锁） - 如果子项还用了
white-space: nowrap，必须先改成white-space: normal
break-all 和 overflow-wrap: break-word 混用会怎样
两者语义冲突，混用后行为不可预测。例如：
.bad-example {
word-break: break-all;
overflow-wrap: break-word;
}
结果可能是：长单词被无条件切开（break-all 主导），而 overflow-wrap 彻底失效；也可能在某些浏览器里表现不一致，尤其 Safari 旧版本。
- 需要“绝对不溢出”且接受语义破坏 → 只用
word-break: break-all - 需要兼顾可读性 → 只用
overflow-wrap: break-word，并配word-break: keep-all（中英混排时） - 别把
break-all当“加强版 break-word”来叠写，它们解决的是不同问题
移动端和表格单元格里的兼容陷阱
word-break: break-all 在 iOS 12 以下 WebView 中对 table-cell 支持不稳定；Safari 15.4 之前，在 contenteditable 或 textarea 中也可能不触发断行。
这不是配置错了，是渲染引擎限制。没有通用 workaround，只能降级处理：
- 表格中用
break-all？先给table加table-layout: fixed和显式width - 编辑场景下需要断行？改用
-webkit-hyphens: auto（Safari 会借此激活断行逻辑，尽管名字叫连字符） - 纯中文内容加
break-all基本无效——中文本来就在字间可断，它没额外作用
真正容易被忽略的点：断行之后，如果父容器 height 固定或 overflow: hidden，换行了也看不见。得确认容器能随内容撑高，或至少设 min-height 预留空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
