text-overflow: ellipsis 仅支持单行省略，多行需用 -webkit-line-clamp（仅 WebKit），Firefox 等需 JS 或服务端截断。
text-overflow: ellipsis 本身不支持多行，强行套用只会失效——这不是你代码写错了，是它根本没这个能力。
为什么 text-overflow: ellipsis 对多行无效
它只作用于单行块容器：必须配合 white-space: nowrap 锁住换行，overflow: hidden 切掉溢出部分，再由 text-overflow 在切口贴省略号。一旦允许换行（比如 white-space: normal），text-overflow 就彻底失能——它根本不检查第 2 行、第 3 行有没有溢出。
常见错误现象：
- 加了
text-overflow: ellipsis但多行文字照常撑开容器，末尾没省略号 - 误以为设个
height+overflow: hidden就能截断多行（实际只是把下面几行“裁掉”，不显示省略号） - 在 Firefox 中完全不显示省略号，控制台也无报错（
-webkit-line-clamp是 WebKit 专属）
-webkit-line-clamp 的最小可用组合
这是目前最接近“纯 CSS 多行省略”的方案，但不是标准属性，必须严格按以下组合使用才生效：
立即学习“前端免费学习笔记（深入）”；
-
display: -webkit-box—— 不能用flex或grid替代，加了-webkit-前缀也不行 -
-webkit-box-orient: vertical—— 必须显式声明，漏掉就忽略-webkit-line-clamp -
-webkit-line-clamp: 3—— 值为整数，表示最多显示几行 -
overflow: hidden—— 必不可少，否则省略号不出
容器还需有明确宽度约束（比如父容器 width 或自身 max-width），否则可能因计算逻辑不触发截断。
Firefox 和旧版 Safari 怎么办
它们不支持 -webkit-line-clamp，也没有等效的原生 CSS 方案。别指望“兼容写法”能绕过去，所谓“降级”只有两条路：
- JS 截断：用
getBoundingClientRect()或scrollHeight+line-height推算行数，手动截文本 + 拼"…"；注意动态内容、字体加载、缩放等场景会出偏差 - 服务端预处理：提前按字数/字符数截断，加省略号后返回 HTML；适合静态或低频更新内容，避免客户端计算压力
不要试图用 clamp() 函数、line-clamp 新草案（尚未落地）、或伪元素模拟省略号——这些要么不工作，要么破坏可访问性或复制行为。
真正跨浏览器的多行省略号，从来不是“CSS 能不能做”的问题，而是“你愿不愿意接受 JS 或服务端介入”的权衡。那个三行摘要卡片看着简洁，背后大概率藏着一行 if (isFirefox) {...} 或一次后端字符串截取调用。
