必须在flex直接子元素上写min-width: 0，否则overflow-wrap等换行规则无法触发；还需配合max-width、white-space: normal及word-break: break-all兜底，且须移除flex-shrink: 0。
必须在 Flex 直接子元素上写 min-width: 0，否则所有换行相关 CSS 都不会触发——这不是属性失效，而是浏览器压根没走到“要不要断”的判断逻辑里。
为什么 overflow-wrap: break-word 单独写没用
它不是“开启换行”的开关，而是“兜底许可”：只有当浏览器确认当前行放不下整个单词时，才允许切开。但这个判断依赖三个前提：
- 父容器有明确宽度（
width或max-width），不能靠 flex 自动拉伸 - 目标元素没继承或显式设置
white-space: nowrap（常见于按钮、标题类组件） - 如果是 flex 子项，其**直接子元素**必须加
min-width: 0——否则浏览器宁可撑宽容器也不换行
min-width: 0 必须加在哪个元素上
只对 display: flex 容器的**直接子元素**生效，写错位置等于白写：
- ✅ 正确：
.card { display: flex; }+.card > .desc { min-width: 0; } - ❌ 错误：给
.card加min-width: 0，或给.desc > span加（除非span显式设了display: block） - ⚠️ 嵌套 flex 场景要逐层加：如果
.desc里还有个display: flex的头像+文字块，那内层容器也得单独加min-width: 0
配套必须写的样式有哪些
光加 min-width: 0 不会自动换行，它只是“解锁收缩权限”。要真正让长单词折行，还得配齐：
-
max-width: 100%或具体值（比如max-width: 300px），提供换行参照宽度 -
white-space: normal（确保不被nowrap锁死） -
overflow-wrap: break-word（主逻辑，保斜杠、点等自然断点） - 可选兜底：
word-break: break-all（防哈希串、base64 等无可断点场景）
注意：word-break: break-word 已废弃，现代浏览器不保证支持，别用。
容易被忽略的干扰项
即使上面都写了，仍可能失效，因为这些规则会被悄悄覆盖：
-
flex-shrink: 0会直接让min-width: 0失效，必须删掉或改成flex-shrink: 1 - 旧版 Safari（≤15.6）不认
flex: 1隐含的min-width: 0，务必显式写 - 移动端或表格中，
overflow-wrap默认不生效：表格需配table-layout: fixed+width在td上；<input>和<textarea></textarea>基本无视该属性
真正难的不是加一行 min-width: 0，而是每次看到撑开，都要顺藤摸瓜查四件事：父容器有没有 max-width、子项是不是 Flex 直接子、min-width 是否被其他规则覆盖、flex-shrink: 0 是否还开着。漏掉任意一环，效果就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
