只加 overflow-wrap: break-word 没用，是因为 Flex 子项默认 min-width: auto（等价 fit-content）会强行撑开容器，阻止换行触发；必须显式给 Flex 直接子元素加 min-width: 0 解锁收缩能力，并配合 max-width 和清除 white-space: nowrap 才生效。
为什么只加 overflow-wrap: break-word 没用
这不是属性失效，而是浏览器压根没走到换行逻辑——Flex 子项默认有 min-width: auto，它等价于 min-width: fit-content，会先强行撑开容器把整串 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 显示全，根本不会触发溢出和换行。你在 DevTools 的 Computed 面板里看到 min-width 还是几百像素，就说明这个锁没解开。
min-width: 0 必须加在哪个元素上
只对 Flex 容器的**直接子元素**生效，写错位置等于白写：
- ✅ 正确：
.container { display: flex; }+.desc { min-width: 0; } - ❌ 错误：给
.container加min-width: 0，或给.desc > span加（除非span显式设了display: block） - ⚠️ 嵌套 Flex 场景要逐层加：如果
.desc里还有个display: flex的头像+文字块，那内层容器也得单独加min-width: 0
移动端和表格里 overflow-wrap 为啥不生效
不是代码写错了，是上下文规则完全不同：
- 移动端 iOS 11 及更早需双写：
word-wrap: break-word（兼容旧名） +overflow-wrap: break-word - 表格中必须配
table-layout: fixed，且td或th要显式设width（如width: 200px），否则所有换行属性都被忽略 -
<input>和<textarea></textarea>基本无视overflow-wrap：input得靠width+overflow: hidden截断；textarea需加resize: none+max-width
overflow-wrap 和 word-break 怎么选组合
它们不是“加强版”关系，而是分工明确：
立即学习“前端免费学习笔记（深入）”；
- 用户可见文本（长链接、邮箱、API 路径）→ 主用
overflow-wrap: break-word，保斜杠、点等自然断点 - 技术字段（日志 ID、哈希串、base64）→ 加兜底
word-break: break-all，防无可断点时失效 - 中文为主正文 → 用
word-break: break-word（注意不是break-all），它对中文按字断、英文保词义 - 绝对别用
word-break: break-word——已废弃，现代浏览器不保证支持
min-width: 0，而是每次看到撑开，都要顺藤摸瓜查四件事：父容器有没有 max-width、子项是不是 Flex 直接子、min-width 是否被其他规则覆盖、flex-shrink: 0 是否还开着。漏掉任意一环，效果就消失。 
