根本原因是flex子项默认min-width: auto阻止收缩，必须显式设min-width: 0，并配合width/max-width、overflow: hidden和display: -webkit-box等才能触发-webkit-line-clamp。
Flex容器里-webkit-line-clamp不生效怎么办
根本原因是 Flex item 默认 min-width: auto，会阻止内容收缩，导致 overflow: hidden 失效，进而让 -webkit-line-clamp 无法触发。
必须显式释放收缩能力：
-
min-width: 0（关键！覆盖默认的auto） -
width: 100%或max-width: 100%（提供宽度约束） -
overflow: hidden（仍需保留）
示例：
.flex-item {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
min-width: 0;
width: 100%;
overflow: hidden;
}
为什么display: -webkit-box在Flex子项里要配合min-width: 0
display: -webkit-box 本身不改变 Flex item 的尺寸计算逻辑。它只是启用多行截断的渲染引擎，但前提是该元素能被压缩到指定行高范围内。
若父容器是 display: flex，且子项没设 min-width: 0，浏览器会优先尊重内容最小宽度，哪怕你写了 -webkit-line-clamp: 2，它也撑开容器、拒绝截断。
常见误操作：
- 只加
-webkit-line-clamp，漏掉min-width: 0 - 用
flex: 1却没配min-width: 0（flex: 1包含flex-shrink: 1，但不够） - 把
min-width: 0写在父容器上（无效，必须写在文本元素自身）
响应式场景下max-height和-webkit-line-clamp怎么选
两者不是互斥，而是适用不同约束条件：
-
-webkit-line-clamp：按「行数」控制，语义清晰，但依赖line-height稳定；line-height变动时，实际显示行数可能漂移 -
max-height：按「像素高度」硬限，更稳定，但需手动计算（如line-height: 1.5× 3 行 ≈max-height: 4.5em），且无法保证恰好截在行尾
推荐组合用法：
.multi-line {
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
min-width: 0;
width: 100%;
overflow: hidden;
/* 同时加 max-height 防止 line-height 漂移导致超框 */
max-height: calc(1.5em * 3);
}
Firefox等非WebKit浏览器怎么处理多行省略
-webkit-line-clamp 在 Firefox、旧版 Edge 中完全不支持，纯 CSS 无标准替代方案。
可行路径只有两条：
- 接受降级：Firefox 下显示完整文本（或靠 JS 动态截断）
- 用伪元素 +
position: absolute模拟省略号，但需固定line-height和height，且对中英文混排、字号缩放敏感
如果必须兼容，建议封装成工具类，并在构建时通过 @supports 分离样式：
@supports (-webkit-line-clamp: 1) {
.ellipsis-multi {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
min-width: 0;
width: 100%;
overflow: hidden;
}
}
真正麻烦的不是写法，而是当 line-height 来自继承、rem 缩放或用户设置字体大小时，-webkit-line-clamp 的行数控制会失效——这点容易被忽略，但线上问题最多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
