text-overflow: ellipsis对多行无效，因其仅支持单行截断，依赖white-space: nowrap和overflow: hidden触发，而多行需换行与高度控制；实现多行省略必须用-webkit-line-clamp配合display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden，且Flex子项须加min-width: 0。
为什么 text-overflow: ellipsis 对多行无效
text-overflow: ellipsis 是 CSS 原生仅支持单行的机制，它依赖于 white-space: nowrap 和块级渲染上下文，而多行必然涉及换行与高度截断——这两者在标准 CSS 中无法被 text-overflow 捕获。浏览器静默忽略你在多行元素上单独加 text-overflow: ellipsis 的写法，哪怕配了 overflow: hidden 和 width。
-webkit-line-clamp 的正确组合写法
这是目前最轻量、无需 JS 的多行省略方案，但必须严格满足以下条件才能生效：
-
display: -webkit-box（不能是flex或block） -
-webkit-box-orient: vertical（缺一不可，且大小写敏感） -
-webkit-line-clamp: N（N 为整数，如2或3） -
overflow: hidden（text-overflow: ellipsis在此场景下可省略，实际不生效） - 容器需有明确的
width或max-width；若父容器是 flex 项，记得加min-width: 0防止 flex 膨胀
示例：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 300px;
}Firefox 和旧版 Edge 不支持怎么办
没有原生 fallback：Firefox 完全忽略 -webkit- 前缀属性，旧版 Edge（非 Chromium）也不支持。此时你只有两个务实选择：
立即学习“前端免费学习笔记（深入）”；
- 接受降级：在 Firefox 中显示完整文本（或靠
height+overflow: hidden硬裁，但无省略号） - 用 JS 补位：例如监听容器尺寸，按行高 × 行数计算最大字符数，再用
textContent.substring(0, maxLen) + '…'截断——注意要避开 HTML 标签、中文字符边界和英文单词断开 - 服务端预截：后端按字数或像素宽度提前截断并加
…，前端只做纯展示，兼容性 100%
容易被忽略的 Flex 场景陷阱
当多行省略元素是 display: flex 容器的子项时，即使写了 -webkit-line-clamp，也常失效。原因在于 flex 子项默认 min-width: auto，会阻止内容收缩到指定行数。
修复方式只有一条：必须显式加 min-width: 0：
.flex-item .multi-line {
min-width: 0; /* 关键！否则 -webkit-line-clamp 失效 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}这个 min-width: 0 不是可选项，是 WebKit 内核下 flex 布局中启用 -webkit-line-clamp 的硬性前提。
