text-overflow: ellipsis 在 flex 容器中不生效，根本原因是 flex 子项默认 flex-shrink: 1 会主动压缩宽度，导致文字无法溢出；必须同时满足：块级元素、white-space: nowrap、overflow: hidden、text-overflow: ellipsis、min-width: 0（或 overflow: hidden）及正确 flex 值（如 flex: 1 1 0）。
text-overflow: ellipsis 在 flex 容器里为啥不生效
根本原因是 text-overflow 只对「块级、溢出被裁剪、且设置了宽度限制」的元素起作用，而 flex 子项默认是 flex-shrink: 1，会主动压缩自身宽度，导致文字没机会“溢出”——浏览器压根不触发截断逻辑。
常见错误现象：text-overflow: ellipsis 写了但文字照常撑开容器，或者直接换行，完全不显示省略号。
- 必须给子元素显式设置
min-width: 0或overflow: hidden（推荐前者，更符合 flex 行为） - 必须关闭子元素的自动伸缩干扰：加
flex-shrink: 0或用flex: 0 1 auto显式控制 - 父容器要设
display: flex，子元素需是块级（如div、p），行内元素（如span）需先display: block
一行三要素缺一不可：white-space + overflow + text-overflow
这三个 CSS 属性是 text-overflow: ellipsis 起效的硬性组合，少一个都会失败。尤其在 flex 场景下，white-space: nowrap 容易被忽略，导致文字提前折行，根本没到“溢出”那步。
-
white-space: nowrap：强制单行，这是省略号出现的前提 -
overflow: hidden：让超出部分不可见（注意：flex 子项优先用min-width: 0配合，而非直接设overflow） -
text-overflow: ellipsis：只负责画省略号，本身不控制溢出行为
典型写法示例：
div.flex-container {
display: flex;
}
div.flex-item {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
flex: 1 和 flex: 1 1 0 的区别直接影响截断效果
flex: 1 等价于 flex: 1 1 0%，其中第二个值 flex-shrink: 1 允许收缩，第三个值 flex-basis: 0% 会让子项初始宽度为 0，靠剩余空间分配——这看似合理，但会导致文字容器宽度计算异常，text-overflow 失效。
- 用
flex: 0 1 auto：不放大、可缩小、基准宽度按内容来（适合固定宽度场景） - 用
flex: 1 1 0（注意是数字0，不是0%）：等价于flex-basis: 0px，强制从零开始均分空间，配合min-width: 0才能稳定触发截断 - 避免
flex: 1直接套在文字容器上，它太“智能”，反而破坏截断前提
IE11 下 flex + ellipsis 的兼容性补丁
IE11 对 flex-basis: 0 解析有 bug，flex: 1 1 0 会失效，必须拆成独立声明并加 hack。
- 必须写全三个属性：
flex-grow: 1、flex-shrink: 1、flex-basis: 0px（不能用0%） - IE 下
min-width: 0有时也不够，需额外加max-width: 100% - 如果父容器用了
flex-wrap: wrap，IE11 会彻底放弃截断，建议改用flex-direction: column或 JS fallback
简写无效时的老实写法：
.ie-fix {
-ms-flex-positive: 1;
-ms-flex-negative: 1;
-ms-flex-preferred-size: 0px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0px;
min-width: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
实际项目里最常卡住的地方，是以为写了 text-overflow 就万事大吉，却没意识到 flex 的弹性尺寸机制和截断所需的“刚性约束”天然冲突。每个 flex 子项都得手动告诉浏览器：“我允许被压缩，但压缩到 0 也行，别给我留余量”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
