-webkit-line-clamp最快但不兼容firefox/edge旧版/ie；text-overflow:ellipsis仅支持单行，多行需::after伪元素渐变遮罩模拟省略号，关键在position:relative、固定line-height、max-height用em计算及background渐变。
纯 CSS 实现多行文本截断并显示省略号，-webkit-line-clamp 最快但 Firefox / Edge（旧版）/ IE 完全不支持；若必须兼容这些浏览器，用 ::after 伪元素模拟遮盖是目前最轻量、无 JS、可预测的 fallback 方案。
为什么不能只靠 text-overflow: ellipsis 处理多行
text-overflow: ellipsis 本身只对单行生效——它依赖 white-space: nowrap，而该声明会直接禁用换行，多行逻辑天然冲突。即使你加了 height 和 overflow: hidden，浏览器也不会自动在第二行末尾插入省略号，只会硬裁剪，可能切在单词中间、甚至字母一半，视觉断裂。
常见错误现象：
- 容器设置了
height: 48px+line-height: 24px+overflow: hidden，但末尾没省略号，只剩半截字 - 用了
-webkit-line-clamp，但在 Firefox 里完全失效，整段文字撑开容器 - 强行给
::after设content: "…"却没定位，省略号飘在左上角或被裁掉
::after 遮盖方案的核心要点
这不是“真截断”，而是用渐变遮罩 + 绝对定位的省略号，视觉上模拟出“刚好停在第 N 行末尾+…”的效果。关键在于控制遮罩区域和文字留白。
使用场景：卡片标题、商品描述摘要、后台列表字段等对语义截断精度要求不高、但需全浏览器一致渲染的场合。
实操建议：
- 容器必须设
position: relative，否则::after无法相对于它定位 -
line-height必须固定（如1.5或24px），否则行高浮动会导致遮罩错位 - 遮罩宽度建议用
padding-right: 1em替代固定像素，适配不同字号 - 渐变背景用
linear-gradient(to right, rgba(255,255,255,0), #fff 50%)，避免硬边，更自然 - 省略号本身用
content: "…"，不要用 Unicode 字符或 SVG，减少兼容风险
一个可靠的 3 行遮盖示例
假设目标是最多显示 3 行，每行 line-height: 1.6，容器字体大小为 14px：
.clamp-3 {
position: relative;
line-height: 1.6;
max-height: calc(1.6 * 3em); /* 3 行高度 */
overflow: hidden;
}
.clamp-3::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 0.3em;
background: linear-gradient(to right, rgba(255,255,255,0), #fff 50%);
pointer-events: none;
}
注意：max-height 必须用 em 或 rem 计算，不能写死 48px —— 否则字体缩放或用户设置大号字时会漏出第 4 行。
容易被忽略的细节
这个方案不处理“最后一行末尾刚好是空格或标点”的情况，省略号会紧贴文字，显得拥挤；如果业务要求严格语义（比如 SEO 抓取完整文本），它也不适用——因为原文本仍在 DOM 中，只是被视觉遮盖。真正需要精确截断+语义保留的场景，还是得回退到 JS 方案，比如监听 offsetHeight 或用 getClientRects() 判断行数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
