Flex子项写overflow-wrap: break-word仍撑破容器，根本原因是其默认min-width: auto阻止收缩，必须同步设min-width: 0、父容器有width/max-width，并移除flex-shrink: 0。
Flex子项写了overflow-wrap: break-word仍撑破容器？先查min-width: auto
不是属性没生效，是它根本没机会生效——overflow-wrap: break-word只在“内容超出可用空间”时才触发换行，而Flex子项默认min-width: auto（等价于min-width: fit-content），浏览器会先拼命撑宽自己，直到整串eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9完整显示，压根不给换行留空间。
必须同步做三件事：
- 在子元素上加
min-width: 0（关键！覆盖Flex默认最小宽度） - 确保父容器有
width或max-width（比如max-width: 100%或width: 300px） - 删掉可能存在的
flex-shrink: 0（它会让子项彻底拒绝压缩）
word-break: break-all和overflow-wrap: break-word怎么选？按内容语义分层写
这不是二选一，而是按内容类型分层处理：
- 用户可见文本（长链接、邮箱、带连字符的术语）→ 主用
overflow-wrap: break-word，它只在整词放不下时才断，观感更合理 - 技术字段（token、日志ID、API路径、哈希串）→ 加兜底
word-break: break-all，防止overflow-wrap在无可断点时失效 - 中文为主或中英混排正文 → 用
word-break: break-word（注意不是break-all），它对中文按字断、英文保词义 - 绝对别用
word-break: break-word——已废弃，现代浏览器不保证支持
稳妥写法：overflow-wrap: break-word; word-break: break-all;，前者主逻辑，后者兜底。
立即学习“前端免费学习笔记（深入）”；
嵌套Flex或响应式场景下min-width: 0为什么加了也不生效？
min-width: 0只对Flex容器的**直接子元素**生效，套一层<div>就失效；旧版Safari（≤15.6）对flex: 1隐含的min-width: 0支持不稳定，必须显式写。
如果.item里又有个display: flex的头像+文字块，那文字块也得单独加min-width: 0。
竖排flex-direction: column时，min-width: 0不影响垂直方向，但文本截断仍发生在水平方向，所以目标子项必须自己设max-width。
移动端、表格、<input>里加了换行样式为什么无效？
不同上下文对换行的约束机制完全不同，不能套用同一套规则：
- 表格中必须配
table-layout: fixed+ 列宽（如td { width: 200px; }），否则忽略所有换行属性 - 移动端要双写：
word-wrap: break-word（兼容iOS 11及更早） +overflow-wrap: break-word（现代标准） -
<input>和<textarea>基本无视overflow-wrap——它们走自己的渲染逻辑；<input>只能靠width+overflow: hidden截断，<textarea>需加resize: none防拖拽，并用max-width约束
最常被忽略的是：min-width: 0必须加在「承载文字的具体元素」上，而不是父容器或抽象类名；一旦嵌套层级变深或遇到替换元素（如img、input），漏掉这一层，前面所有样式都归零。
