必须给flex直接子元素加min-width: 0，否则overflow-wrap: break-word等换行规则无效；因其依赖内容超出可用宽度才触发，而默认min-width: auto会强行撑开容器，阻止浏览器进入换行逻辑。
必须给 Flex 直接子元素加 min-width: 0，否则所有换行或截断规则都只是摆设。
为什么 overflow-wrap: break-word 单独写没用
它不是“一加就生效”的开关，而是依赖浏览器先判定“内容超出可用宽度”。但 Flex 子项默认 min-width: auto（等价于 fit-content），会强行撑开父容器把整串 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 显示全，压根不进入换行逻辑。你在 DevTools 的 Computed 面板里看到 min-width 还是几百像素，就说明这个锁没解开。
-
min-width: auto是隐式行为，不会出现在 Styles 面板里，但真实生效 - 只对
display: flex容器的**直接子元素**起作用，套一层<div> 就失效 <li>旧版 Safari（≤15.6）对 <code>flex: 1隐含的min-width: 0支持不稳定，必须显式写 - 父容器要有明确宽度约束：
max-width: 100%或具体值（如max-width: 300px），否则浏览器认为“还有空间”，不触发换行 - 目标元素不能有
flex-shrink: 0—— 它会直接覆盖min-width: 0，让子项彻底拒绝压缩 - 清除
white-space: nowrap（常见于按钮、表格单元格、某些 UI 框架组件），确保换行策略有机会执行 - 用户可见文本（长链接、邮箱、带连字符的路径）→ 主用
overflow-wrap: break-word，保斜杠、点等自然断点 - 技术字段（token、日志 ID、base64、哈希串）→ 加兜底
word-break: break-all，防无可断点时失效 - 中文为主正文 → 用
word-break: break-word（注意不是break-all），它对中文按字断、英文保词义 - 绝对别用
word-break: break-word—— 已废弃，现代浏览器不保证支持 - 移动端小屏下，
min-width: 0必须配max-width: 100%，否则在flex-direction: column里仍可能水平溢出 - 如果子项内部还有
display: flex的头像+文字块，那内层容器也得单独加min-width: 0 - 表格中要生效，必须配
table-layout: fixed+td或th的显式width（如width: 200px） -
<input>和<textarea></textarea>基本无视overflow-wrap：<input>得靠width+overflow: hidden截断；<textarea></textarea>需加resize: none+max-width
min-width: 0 必须配合的三个条件
加了 min-width: 0 只是打开收缩权限，不等于自动换行或截断。它需要和以下三点协同才能真正起效：
overflow-wrap 和 word-break 怎么搭配才合理
它们不是替代关系，而是按内容语义分层处理：
移动端和嵌套 Flex 场景最容易漏的点
这些地方不检查，min-width: 0 就等于白写：
真正难的不是加一行 min-width: 0，而是每次看到撑开，都要顺藤摸瓜查四件事：父容器有没有 max-width、子项是不是 Flex 直接子、min-width 是否被其他规则覆盖、flex-shrink: 0 是否还开着。漏掉任意一环，效果就消失。
