只写 overflow-wrap: break-word 一定无效，必须同步设 min-width: 0 并约束父容器宽度；因 Flex 子项默认 min-width: auto 会优先撑宽容器，使换行逻辑根本无法触发。
只写 overflow-wrap: break-word 一定无效，必须同步设 min-width: 0 并约束父容器宽度。
为什么 overflow-wrap: break-word 单独写没用
它不是“不生效”，而是压根没机会触发——浏览器先按 Flex 子项默认的 min-width: auto 把容器撑宽，直到整串 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 完整显示，根本不会进入“内容溢出→换行”的流程。
常见错误现象：div 设了 width: 300px，但子元素仍横向溢出；开发者加了 overflow-wrap: break-word 后检查 computed 样式，发现 min-width 还是 auto。
- Flex 子项的
min-width: auto是隐式行为，不会被overflow-wrap覆盖 - 它等价于
min-width: fit-content，优先保内容完整，而非守尺寸 - 旧版 Safari 对
flex: 1隐含的min-width: 0支持不稳定，必须显式写
min-width: 0 必须和哪些样式一起用
单独设 min-width: 0 只是打开收缩开关，后续行为取决于你要的效果：
立即学习“前端免费学习笔记（深入）”；
- 要换行：配
overflow-wrap: break-word（推荐）或word-break: break-all（兜底） - 要省略号：必须同时有
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 要确保生效：父容器得有
width或max-width（比如max-width: 100%），否则子项仍会撑满视口 - 若子项还写了
flex-shrink: 0，min-width: 0直接失效，得删掉
overflow-wrap 和 word-break 怎么选组合
两者语义不同，混用才是实际项目中的稳妥方案：
-
overflow-wrap: break-word：优先保持单词完整性，适合 URL、token、日志 ID 等技术字符串 -
word-break: break-all：暴力断字符，对user_id_123456789这种也敢切，但中文里慎用（可能把“数据库”切成“数据”和“库”） - 安全写法：
overflow-wrap: break-word; word-break: break-all;，前者主逻辑，后者兜底 - 绝对别用
word-break: break-word—— 已废弃，现代浏览器不保证支持
表格、移动端、表单里 overflow-wrap 失效怎么办
不同上下文对换行的约束机制完全不同，不能套用同一套规则：
- 表格中：必须加
table-layout: fixed，且td或th显式设width（如width: 200px），否则忽略所有换行属性 - 移动端：iOS 11 及更早需双写
word-wrap: break-word（旧名兼容） +overflow-wrap: break-word -
<input>和<textarea>基本无视overflow-wrap—— 它们走独立渲染逻辑；input靠width+overflow: hidden截断，textarea要加resize: none+max-width
最常被忽略的是：Flex 子项的 min-width: 0 必须写在直接子元素上，嵌套一层就失效；而且它只影响主轴方向，column 布局下仍需手动给子项加 max-width: 100% 控制水平宽度。
