必须显式设置 min-width: 0 才能激活 overflow-wrap: break-word，因 flex 直接子项默认 min-width: auto 阻止收缩，导致换行失效；还需父容器限宽、重置 white-space、避免 flex-shrink: 0 等配合。
加了 overflow-wrap: break-word 还是撑破屏幕？大概率不是属性写错了，而是浏览器压根没走到换行逻辑——Flex 子项卡在 min-width: auto 上死扛不缩。
为什么 overflow-wrap: break-word 在移动端经常失效
它只在“容器宽度不足 + 子项允许收缩”两个条件同时满足时才触发。而 Flex 直接子项默认 min-width: auto（等价于 fit-content），浏览器会优先保障整串字符完整显示，哪怕把卡片拉到屏幕外。这个值不会出现在 DevTools 的 Computed 面板里，但真实生效。
- 父容器没设
max-width或width，比如只写了display: flex却没约束宽度 - 目标元素被
white-space: nowrap锁死（常见于按钮、表格单元格、UI 框架组件） - 子项同时设了
flex-shrink: 0，直接让min-width: 0失效 - 用了
word-break: keep-all或hyphens: auto等压制性样式
必须显式给 Flex 直接子元素加 min-width: 0
这是所有修复动作的起点，漏掉就前功尽弃。它只对 Flex 的**直接子元素**起作用，套一层 <div> 就失效。
<ul>
<li>写法必须是无单位的 <code>min-width: 0，不是 0px 或 0%，后者在 Safari 14+、Firefox 91+ 中可能不生效
flex: 1 隐含的 min-width: 0 支持不稳定，一律显式写flex-shrink: 0，得先删掉它，否则 min-width: 0 被忽略min-width 真的是 0px，不是 auto 或 fit-content
按语义分层组合断行策略
别只靠一个声明兜底。用户可见文本和纯技术字段，处理逻辑不同。
- 邮箱、URL、带连字符的术语（如
verylongemailaddress@example.com）→ 主用overflow-wrap: break-word - token、哈希串、API 路径、日志 ID（如
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9）→ 加兜底word-break: break-all，防止前者因无可断点而静默失效 - 绝对不用
word-break: break-word——已废弃，现代浏览器不保证支持 - 稳妥写法：
overflow-wrap: break-word; word-break: break-all;，前者主逻辑，后者兜底
移动端必须配齐的三个硬约束
漏一个，break-word 就等于没写。
- 父容器要有明确宽度：用
max-width: 100%或具体像素值（如max-width: 375px），不能只依赖width: 100%（在某些嵌套 inline 场景下不可靠） - 目标元素必须重置
white-space：显式写white-space: normal，避免继承自按钮或表格单元格的nowrap - 检查嵌套 Flex：如果卡片内还有头像+文字的子 Flex 容器，那个文字块也得单独加
min-width: 0，否则它自己又卡住min-width: auto
真正难的从来不是选哪个 CSS 属性，而是得先判断这段长英文——它是不是用户该读的？如果是技术字段，word-break: break-all 才是合理选择；如果是用户可见链接，强行切开反而破坏可读性。别让“能断”代替“该断”。
