必须显式设置min-width: 0才能覆盖flex子项默认的min-width: auto，否则text-overflow: ellipsis因元素无法收缩而失效；该值须加在直接包裹文本的块级元素上，并与white-space: nowrap、overflow: hidden、text-overflow: ellipsis及宽度约束同级生效。
因为 flex: 1 默认等价于 flex: 1 1 0%，其中 0% 是模糊的基准值，无法覆盖 Flex 子项默认的 min-width: auto，导致元素拒绝收缩，text-overflow: ellipsis 失去触发前提。
flex: 1 为什么隐式锁死文本收缩能力
flex: 1 看似“自动占满剩余空间”，但它不重置 min-width。浏览器仍按规范给该子项设 min-width: auto —— 意思是“至少要容下最长单词或整段 URL”。哪怕父容器只剩 50px，它也硬撑着不缩，overflow: hidden 就没东西可裁，text-overflow: ellipsis 自然静默失效。
常见现象包括：
- 文字把
.item帽子顶宽，甚至拖出横向滚动条 - DevTools 的 Computed 面板里，
min-width显示为auto（不是0px） - 同一段 CSS 挪到普通
div里立刻生效
必须加 min-width: 0，且位置不能错
min-width: 0 是唯一能可靠覆盖 min-width: auto 的写法。它不是设“最小宽度为 0px”，而是告诉 Flex 布局：“允许我缩到比内容还小”。这个动作是后续所有截断逻辑的起点。
关键点：
- 必须加在直接包裹文本的元素上，比如
.title或.content，不是父级 Flex 容器（如.item） - 不能用
min-width: 0px或min-width: 0%—— Firefox 和旧 Safari 中不可靠 - 如果该元素还设了
flex-shrink: 0，min-width: 0会被无视，必须删掉或显式设为flex-shrink: 1
四件套必须同级、同块、同元素
min-width: 0 只是开关，真正触发省略号还需另外三个属性协同作用，且全部落在同一个块级元素上：
-
white-space: nowrap：强制单行，否则换行就绕过截断逻辑 -
overflow: hidden：隐藏溢出内容，但前提是元素先被压窄 -
text-overflow: ellipsis：只对块级元素生效，span默认是 inline，得加display: block或display: inline-block - 宽度约束：
max-width: 100%、width: 200px或flex-basis: 0都行，但不能是auto
嵌套 Flex 场景下最容易漏掉的点
真实项目中，.item { flex: 1; } 里面往往还有个 .info { display: flex; }，再里面才是 .text。这时 min-width: 0 必须落到 .text 上，而不是外层 .item 或中间 .info。
典型错误结构：
.item { flex: 1; min-width: 0; }
.info { display: flex; }
.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
问题在于：.text 缺少 min-width: 0，且默认是 inline 元素，overflow 和 text-overflow 对它无效。
正确写法：
.text {
min-width: 0;
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
复杂点永远在嵌套层级和 display 类型上——多一层 Flex，就多一个 min-width: auto 要手动覆盖；多一个 inline 元素，就得补一块 display: block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
