overflow: hidden在flex子项上不生效是因为子项默认min-width: auto（主轴为row时）锁死最小宽度不小于内容，导致溢出未发生；需对直接子项显式设置min-width: 0，并配合display: block、white-space: nowrap、overflow: hidden和明确宽度约束才能使text-overflow: ellipsis生效。
为什么overflow: hidden在Flex子项上不生效
不是overflow: hidden写错了，而是Flex子项默认带min-width: auto（主轴为row时）或min-height: auto（主轴为column时），它会锁死最小尺寸不小于内容自然宽/高——浏览器宁可撑破容器，也不压缩内容。此时“溢出”根本没发生，overflow: hidden自然无从触发。
典型现象包括：text-overflow: ellipsis不显示、长URL顶破卡片、加了white-space: nowrap却依然换行。打开DevTools检查该子元素的computed min-width，若仍是auto，基本可锁定是这个问题。
必须给哪个元素加min-width: 0
只对display: flex容器的**直接子项**生效，且必须加在你希望截断的那个元素上——不是父容器，也不是孙子节点。
- ❌ 给
.container加min-width: 0无效：它只限制自身宽度，不影响子项收缩逻辑 - ❌ 动态class中只把
min-width: 0放在.truncate里，但该class未激活 → 白写 - ❌ 子项内部是嵌套Flex（如头像+文字块），只在外层加
min-width: 0，内层文字容器仍受min-width: auto锁定 - ✅ 正确做法：给含文本的
<p></p>或<span></span>（需先display: block）显式设min-width: 0
text-overflow: ellipsis生效的硬性组合
text-overflow: ellipsis不是开关式属性，它依赖四个条件同时成立：
- 目标元素必须是块级盒：
display: block或inline-block（<span></span>默认是inline，不加会失效） -
white-space: nowrap：强制单行，否则文字提前折行，根本不到“溢出”那步 -
overflow: hidden：裁剪动作本身，但没min-width: 0时子项压根不缩，overflow就无内容可裁 - 明确宽度约束：不能只靠
flex: 1，推荐用flex: 1 1 0（第三个参数是像素值，起点确定），避免flex-basis: auto推导异常
若子项含<img>，额外加max-width: 100%，否则图片固有尺寸会撑破限制。
容易被忽略的父容器前提
所有截断逻辑都建立在一个基础之上：父容器自身得有明确宽度约束。
- 没有
width、max-width或弹性上下文（如flex: 1的兄弟项已占满）→ 容器宽度无限，“溢出”不存在，一切配置白搭 -
overflow: hidden必须加在真正发生溢出的那层容器上；加错层级（比如只加在外层wrapper）等于没加 - 如果父容器高度固定（如
position: fixed+top/bottom），子项默认align-items: stretch会被拉伸填满高度，内容可能被压扁却不滚动——这不是隐藏，是强制挤压
真正起效的链条是：父容器尺寸受限 → 子项min-width: 0允许压缩 → overflow: hidden触发裁剪 → text-overflow: ellipsis才有机会渲染省略号。少一环，就白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
