必须显式设min-width: 0解除flex子项默认的min-width: auto锁定，再配合父容器max-width、清除flex-shrink: 0及合理选用overflow-wrap: break-word与word-break: break-all，才能触发换行。
Flex子项写了overflow-wrap: break-word却仍撑破容器，不是属性没生效，而是它根本没机会生效——浏览器先按min-width: auto把子项撑开，压根不触发换行逻辑。必须显式加min-width: 0，再配合宽度约束和断词策略。
为什么min-width: 0是关键开关
Flex直接子项默认有min-width: auto（等价于fit-content），浏览器会优先保证整串无空格内容（如eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9）完整显示，宁可拉宽父容器也不压缩换行。
-
min-width: 0不是让文字变小，而是解除“最小宽度锁”，让后续换行规则有机会计算可用空间 - 只对Flex容器的直接子元素生效，写在
.container或.item > span上都无效 - 若子项同时设了
flex-shrink: 0，min-width: 0会被忽略，必须先删掉 - 旧版Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，必须显式写
overflow-wrap和word-break怎么配才不翻车
二者不是加强关系，而是分工：前者保语义，后者兜底。单独用任一个都容易漏场景。
- 用户可见文本（长链接、邮箱、带连字符术语）→ 主用
overflow-wrap: break-word，它只在整词放不下时断，保留/、.等自然断点 - 技术字段（日志ID、哈希串、base64、API路径）→ 必加
word-break: break-all，防overflow-wrap因无可断点而失效 - 中文或中英混排正文 → 用
word-break: break-word（注意不是break-all），中文按字断、英文保词义 - 绝对别用
word-break: break-word（已废弃），现代浏览器不保证支持
移动端、表格、<input>里为啥加了也不生效
不同上下文对换行的约束机制完全不同，不能套用同一套规则。
- 移动端iOS 11及更早需双写：
word-wrap: break-word（兼容旧名） +overflow-wrap: break-word - 表格中必须配
table-layout: fixed+ 显式列宽（如td { width: 200px; }），否则所有换行属性被忽略 -
<input>和<textarea></textarea>基本无视overflow-wrap：<input>只能靠width+overflow: hidden截断；<textarea></textarea>需加resize: none+max-width - 嵌套Flex场景要逐层设：
.item里若还有display: flex的头像+文字块，那内层容器也得单独加min-width: 0
真正难的不是加一行min-width: 0，而是每次看到撑开，都要顺藤摸瓜查四件事：父容器有没有max-width、子项是不是Flex直接子、min-width是否被其他规则覆盖、flex-shrink: 0是否还开着。漏掉任意一环，效果就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
