flex容器中多行省略不生效，因-webkit-line-clamp依赖display: -webkit-box，而flex子项的display被父级覆盖，且默认min-width: auto阻碍收缩；必须同时满足display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: n、min-width: 0（或width: 0）四条件。
Flex容器中多行省略为何不生效
直接在Flex子项上套用 -webkit-line-clamp 通常无效，因为该属性依赖 display: -webkit-box，而Flex子项的 display 已被父级 display: flex 覆盖。更关键的是，flex-shrink: 1 默认受 min-width: auto 阻碍——即使内容超长，子项也不愿收缩，导致 overflow: hidden 形同虚设。
必须同时满足的四个条件
要让多行省略在Flex中可靠工作，缺一不可：
-
display: -webkit-box（覆盖Flex子项的默认display） -webkit-box-orient: vertical-
-webkit-line-clamp: N（N为期望行数） -
min-width: 0或width: 0（打破min-width: auto的默认限制）
仅加 overflow: hidden 和 text-overflow: ellipsis 没用——后者只对单行有效，多行场景下它完全不参与渲染逻辑。
实际可用的CSS写法
假设父容器是 display: flex，子项需显示最多2行：
.flex-item {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
min-width: 0; /* 关键！否则在Chrome/Firefox中可能失效 */
width: 100%; /* 帮助触发收缩，尤其当父容器宽度不固定时 */
}
注意：width: 100% 不是万能解，若父Flex容器未设宽度约束（如 flex: 1 但无 max-width），仍可能撑开；此时建议给父容器加 max-width: 100% 或明确 width。
兼容性与降级处理
-webkit-line-clamp 在 Chrome 68+、Edge 79+、Safari 12+、Firefox 68+ 支持良好，但IE全系不支持。若需兼容IE或旧Android Webview，无法纯CSS实现——必须用JS测量行高+截断，或改用固定高度 + overflow: hidden（不带省略号）。
真正容易被忽略的是：多行省略效果高度依赖字体渲染细节。同一段文字，在不同系统/字体下，line-height 微小差异就可能导致第N行被截半或漏掉省略号。上线前务必在iOS Safari、Android Chrome、Windows Edge三端真机验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
