text-overflow: ellipsis在多行场景中根本不起作用，因其仅支持单行截断，必须配合white-space: nowrap；多行需用-webkit-line-clamp（配display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden）实现。
为什么 text-overflow: ellipsis 在 Flex 多行场景里根本不起作用
不是你漏写了 white-space: nowrap，也不是忘了 overflow: hidden——而是 text-overflow: ellipsis 本身只对单行生效。它压根不支持多行截断。所有“Flex + 多行省略号”的尝试，本质都是在绕开这个限制，用别的机制模拟效果。
-webkit-line-clamp 是唯一靠谱的纯 CSS 多行截断方案
现代浏览器（Chrome 25+、Firefox 68+、Safari 10+、Edge 79+）都支持这个非标准但已事实标准化的属性。但它必须和特定 display 模式配合，否则直接失效：
-
display: -webkit-box是强制前提，不能写display: flex或display: block -
-webkit-box-orient: vertical必须显式声明，缺一不可 -
-webkit-line-clamp: 3的值必须是具体数字，不能是unset或变量（CSS 自定义属性也不行） - 容器必须有明确的宽度约束（
width、max-width或父级 Flex 提供的可用空间）
典型写法：
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
Flex 布局里 -webkit-line-clamp 失效的三个高发位置
即使语法全对，在 Flex 结构中仍极易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 文本容器不是 Flex 项的**直接子元素**：比如
.item > .flex-wrapper > .text，那.text就得自己扛起min-width: 0和宽度约束，光靠父级.flex-wrapper设flex: 1不够 - 文本容器设了
flex-shrink: 0：这会直接覆盖min-width: 0，导致无法压缩，必须删掉或改成flex-shrink: 1 - 用了
flex: 1却没配min-width: 0：旧版 Safari（≤15.6）下必挂，别心存侥幸
不支持 -webkit-line-clamp 时怎么兜底
Firefox 67 及更早、IE 等浏览器需要降级。别用 JS 计算行高——太重。推荐双层 fallback：
- 第一层（视觉近似）：
max-height: 4.5em+line-height: 1.5em+overflow: hidden，不加省略号，但能控制高度 - 第二层（伪元素补省略）：
::after绝对定位盖右下角，内容为"…"，背景色需与父容器一致（否则露白边） - 关键细节：伪元素要设
z-index: 1，且容器需position: relative
真正难的从来不是写对那一行 -webkit-line-clamp，而是确保它所在的那个元素，在 Flex 树里既没被 flex-shrink: 0 锁死，也没被嵌套层级隔断宽度继承。每次失效，先打开 DevTools 看 computed 的 min-width 是不是 auto——是的话，就从那里开始修。
