加了 overflow: hidden 和 text-overflow: ellipsis 仍撑破容器，是因为 Flex 子项默认 min-width: auto，阻止收缩，需显式设 min-width: 0 并配合 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 四件套。
为什么加了 overflow: hidden 和 text-overflow: ellipsis 还是撑破容器？
因为 Flex 子项默认 min-width: auto，它会把最长单词或无空格字符串（如 URL、哈希）当“不可分割单元”，强行撑开自身宽度——此时 overflow: hidden 根本没内容可裁，text-overflow: ellipsis 更是形同虚设。
你看到的“撑破”，本质是浏览器拒绝压缩，不是样式没生效。DevTools 的 Computed 面板里查不到这个 min-width: auto，但它真实存在且优先级很高。
-
min-width: 0必须写在 flex 直接子元素上，写在父容器无效 - 如果子元素同时有
flex-shrink: 0，min-width: 0会被忽略——得先删掉前者 - 嵌套 Flex 场景下（比如卡片内再套头像+文字块），文字块本身也得单独加
min-width: 0
怎样让省略号在 Flex 里真正生效？
四件套缺一不可：必须同时满足 min-width: 0 + white-space: nowrap + overflow: hidden + text-overflow: ellipsis，且该元素要有明确宽度约束。
-
white-space: nowrap要写在目标文本元素上，不是父容器；否则子元素仍可能换行，破坏“单行溢出”前提 -
overflow: hidden必须加在发生溢出的那层容器上，加错层级（比如只加在外层 wrapper）等于没加 - 推荐用
flex: 1 1 0替代flex: 1：后者等价于flex-basis: 0%，渲染前父宽未定，容易卡住；0是像素值，起点确定 - 父容器必须有
width或max-width，否则没有“可用空间”概念，所有截断逻辑都失效
长文本换行 vs 省略号，该用 min-width: 0 还是 flex-shrink: 0？
这是两个完全不同的控制意图：min-width: 0 是为换行/截断打开收缩通道；flex-shrink: 0 是彻底禁用收缩，适合固定尺寸元素（如按钮、图标、头像）。
- 要允许长单词折行（如 URL、日志 ID）→ 用
min-width: 0+overflow-wrap: break-word（主逻辑） +word-break: break-all（兜底） - 要保图标不被压成一条线 → 用
flex-shrink: 0+flex: 0 0 auto+width: auto+height: auto+min-width: 0（图片需这五者协同） - 混用风险高：给文本容器加
flex-shrink: 0，它就彻底拒绝压缩，哪怕屏幕只剩 1px 宽，也会横向滚动或溢出 - Safari ≤15.6 对
flex: 1隐含的min-width: 0支持不稳定，必须显式写min-width: 0
Tailwind 用户注意哪些隐藏坑？
flex-shrink-0 和 min-w-0 不是互斥替代，而是按语义选：前者保形，后者保换行。但 Tailwind 的原子类容易被覆盖或失效。
-
flex-1类隐含flex-shrink: 1，会直接覆盖后写的flex-shrink-0—— 必须用flex-none或组合flex-[0_0_auto] -
min-w-full或w-full与flex-shrink-0同时存在时，浏览器优先撑宽而非压缩，视觉上像“没反应” - 响应式图片稳妥写法：
flex-shrink-0 min-w-0 w-auto h-auto max-w-full，漏一不可 - 小屏下多个
flex-shrink-0并排 → 总宽超容器，直接横向滚动；此时得补flex-wrap或改用grid
真正难的不是加哪一行 CSS，而是每次遇到溢出都得回头确认：父容器有没有宽度约束、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、文本截断四件套有没有写全——漏掉任意一环，效果就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
