text-overflow: ellipsis仅对单行有效，必须配合white-space: nowrap和overflow: hidden；多行省略需用-webkit-line-clamp，且须同时设置display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden及明确width/max-width。
text-overflow: ellipsis 只对单行有效
text-overflow: ellipsis 本身不支持多行文本截断，这是最常被误解的一点。它必须配合 white-space: nowrap 和 overflow: hidden 才能生效，而这三者共同作用的结果就是强制文本在一行内显示——所以你看到的“省略号”永远只出现在单行末尾。
实现多行省略的可靠方案：-webkit-line-clamp
目前唯一被主流浏览器（Chrome、Safari、Edge 16+、Firefox 73+）稳定支持的纯 CSS 多行省略方案是 -webkit-line-clamp。它不是标准属性，但兼容性已足够好，且无需 JS 干预。
关键组合如下：
-
display: -webkit-box：启用弹性盒模型（WebKit 特定） -
-webkit-box-orient: vertical：设置主轴为垂直方向 -
-webkit-line-clamp: 3：限制最多显示 3 行（可改为你需要的数字） -
overflow: hidden：隐藏溢出内容（必需）
示例：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
为什么不能用 text-overflow + height + overflow:hidden 模拟多行省略
很多人尝试给容器设固定 height、line-height，再配 overflow: hidden，以为能“卡住”两行并加省略号——但这样只会粗暴裁剪，**不会出现省略号**，因为 text-overflow 在多行场景下完全不触发。
更麻烦的是：line-height 受字体、字号、字体度量影响，实际行高可能浮动；height 稍有偏差就会切掉半个字或留白，维护成本高，响应式下极易失效。
需要兼容老版 Firefox 或 IE？只能用 JavaScript 回退
Firefox 72 及更早版本不支持 -webkit-line-clamp；IE 完全不支持。若项目仍需覆盖这些环境，得用 JS 动态截断：
- 用
element.textContent获取原始文本 - 逐字拼接并用
element.scrollHeight > element.clientHeight判断是否溢出 - 或用
getClientRects()获取每行渲染范围，数到第 N 行末尾位置再截断 - 注意：要处理中英文、标点、空格断行逻辑，否则可能在标点前截断
不过绝大多数现代项目已无需为 IE 做专门适配，优先保证 -webkit-line-clamp 正确使用即可。
真正容易被忽略的是：如果元素内含 inline 元素（比如 <span></span> 或图标），-webkit-line-clamp 可能失效或截断位置异常——此时建议统一用纯文本，或把富文本内容先转成 plain text 再应用该样式。
