flex子项撑破容器是因为min-width: auto阻止换行，需在直接子元素设min-width: 0、父容器设width/max-width、移除flex-shrink: 0。
Flex子项写了overflow-wrap: break-word还是撑破容器？
不是属性没生效，是它根本没机会触发——浏览器先按默认的 min-width: auto 把子项撑开，直到整串 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 完整显示，压根不给换行留空间。
必须同步做三件事：
- 在 flex 直接子元素上显式写
min-width: 0（不能写在父容器或嵌套内层） - 确保父容器有
width或max-width（比如max-width: 100%或具体像素值） - 删掉可能存在的
flex-shrink: 0（它会让min-width: 0失效）
为什么min-width: 0必须写在直接子项上？
min-width: auto 是 Flex 布局对直接子项的隐式约束，不会出现在 DevTools 的 Computed 面板里，但真实生效。它只作用于 display: flex 的**第一层子元素**。
常见错误场景：
- 给
.container写min-width: 0→ 无效 - 给
.item > span写min-width: 0→ 无效（span 不是 flex 直接子项） - 嵌套 flex：如果
.item里还有个display: flex的头像+文字块，那文字块也得单独加min-width: 0 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，必须显式写
overflow-wrap: break-word 和 word-break: break-all 怎么选？
这不是二选一，而是分层配合：前者保语义，后者兜底。单独用哪个都容易出问题。
- 用户可见文本（长链接、邮箱、带连字符的术语）→ 主用
overflow-wrap: break-word - 技术字段（token、日志 ID、哈希串、base64）→ 加兜底
word-break: break-all - 中文为主或中英混排正文 → 用
word-break: break-word（注意不是break-all），它对中文按字断、英文保词义 - 绝对别用
word-break: break-word—— 已废弃，现代浏览器不保证支持
稳妥写法：overflow-wrap: break-word; word-break: break-all;，前者主逻辑，后者防无可断点时失效。
移动端和表格里为什么加了也不生效？
不同上下文对换行的约束机制完全不同，不能套用同一套规则。
- 移动端要双写：
word-wrap: break-word（兼容 iOS 11 及更早） +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 -
<pre class="brush:php;toolbar:false;"></pre>和<code>默认white-space: pre，必须重置为white-space: pre-wrap或normal才能配合换行规则
真正难的不是写 min-width: 0 这行代码，而是每次看到溢出，都要顺藤摸瓜查四件事：父容器有没有 max-width、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、有没有漏掉 flex-shrink: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
