word-break: break-all在Flex容器中失效的根本原因是flex子项默认min-width: auto锁死收缩，必须显式设min-width: 0、父容器有width/max-width约束、且无white-space: nowrap干扰，三者缺一不可。
word-break: break-all 在 Flex 容器里失效
不是属性没生效，而是 flex 子项默认的 min-width: auto 锁死了收缩能力。浏览器优先拉伸容器来塞下整个链接，根本不会走到“要不要断行”的逻辑。
必须同时满足三个条件：
- 给含链接的元素加
min-width: 0 - 确保父容器有明确宽度约束（
width、max-width或flex: 1） - 确认没继承
white-space: nowrap（常见于<button>、<td>、UI 框架组件）
如果子项还设了 flex-shrink: 0，min-width: 0 也无效——得先删掉它。
overflow-wrap: break-word 对 URL 不触发断行
这个属性只在“单词放不下整行”时才断，前提是浏览器得知道“一行有多宽”。如果父容器没设宽度，它会先无限撑宽，压根不判断是否要断。
立即学习“前端免费学习笔记（深入）”；
典型表现：桌面缩窄窗口没反应，手机上链接直接溢出屏幕右侧。
解决方法：
-
overflow-wrap: break-word必须配合width: 100%或明确的max-width - Flex 布局中，
width: 100%和min-width: 0缺一不可 - 表格中还要加
table-layout: fixed+ 显式th/td宽度，否则忽略该规则
移动端微信 X5 内核不支持 overflow-wrap: anywhere
别指望用 overflow-wrap: anywhere 替代 break-all——X5（微信内置浏览器）根本不认这个值，写了等于白写。
兼容性兜底策略：
- 优先用
overflow-wrap: break-word处理用户可见链接（如https://example.com/path） - 对纯技术字符串（token、base64、哈希）用
word-break: break-all，但仅加在特定 class 上（如.token-value） - iOS Safari ≤15.6 可能不识别
flex: 1隐含的min-width: 0，得显式写出来
中文混排场景下 word-break: keep-all 单独无效
如果链接里夹着中文（比如 https://api.example.com/订单详情），只写 word-break: keep-all 会导致英文部分仍撑开——它只管 CJK 文本，不管 URL 里的拉丁字符。
正确组合是：
-
word-break: keep-all+overflow-wrap: break-word - 二者必须同时存在，缺一不可
- 再补一句
white-space: normal，防止父级继承了nowrap
真正卡住人的从来不是属性写错，而是漏掉了宽度约束、flex 收缩限制或 white-space 干扰——这三个点没清干净，再换十种写法也没用。
