flex-wrap: nowrap 会直接压制 overflow-wrap，导致子元素即使设置了 break-word 也无法换行而横向溢出；必须显式设置 flex-wrap: wrap 或配合 min-width: 0 才能生效。
flex-wrap: nowrap 会直接压制 overflow-wrap
这是最常被忽略的底层冲突：即使你给子元素写了 overflow-wrap: break-word，只要父容器是 display: flex 且没显式设 flex-wrap: wrap（默认就是 nowrap），浏览器就会优先执行“单行压缩”，而不是触发文本换行逻辑。
现象是文字撑破容器、横向溢出，控制台看不出报错，但布局已经失控。
- 必须给 flex 容器加
flex-wrap: wrap，这是前提，不是可选项 - 如果业务上确实不能换行（比如导航栏），那就别依赖
overflow-wrap，改用white-space: nowrap+text-overflow: ellipsis配合固定宽高 - Chrome 和 Safari 表现一致；Firefox 在某些嵌套场景下可能“侥幸”换行，但不可靠
min-width: 0 是 flex 子项换行的隐性开关
Flex 子项默认 min-width: auto，意思是“宁可撑开容器，也不缩小自己”。哪怕你设了 max-width: 100%，它依然不换行——因为 min-width: auto 优先级更高。
所以光写 overflow-wrap 不管用，得配合解除这个限制：
- 给子元素加
min-width: 0（推荐）或min-width: 1px - 如果用了
flex: 1，它等价于flex: 1 1 0，此时flex-basis: 0已经放弃内容宽度参考，min-width: 0就更关键 - 避免只写
flex-basis: auto却不设min-width，这等于留了个“不换行陷阱”
word-break: break-all 和 overflow-wrap: break-word 别混着用
word-break: break-all 优先级高于 overflow-wrap: break-word，一旦同时存在，后者基本失效。而且它对中文会无差别断字，比如「人工智能」变成「人工|智能」，语义和阅读体验都受损。
- 日常场景优先用
overflow-wrap: break-word（或兼容旧版的word-wrap: break-word） - 仅当出现超长无空格字符串（如 base64、长 URL）时，才在同一样式块里加
word-break: break-all作兜底 - 不要给整个卡片或列表项统一加
word-break: break-all，容易污染正常段落文本 - 对纯中文内容，可额外加
word-break: keep-all，但它不影响英文，需单独处理
响应式断点里要重置 white-space
很多团队在桌面端用 white-space: nowrap 做紧凑排版，但忘了在移动端媒体查询里关掉它。结果就是小屏下文字死活不换行，哪怕其他属性全配齐。
- 检查所有继承链，用浏览器开发者工具看 computed 样式里的
white-space值 - 在
@media (max-width: 768px)里显式重置：white-space: normal - 如果用了
text-overflow: ellipsis，记得同步移除white-space: nowrap，否则换行和省略都会失效
真正卡住换行的，往往不是哪个属性没加，而是某个父级悄悄继承了 white-space: nowrap，或者 flex-wrap: nowrap 没被覆盖——这些细节在审查元素时一眼就能定位，但容易被跳过。
