-webkit-line-clamp不可靠因属WebKit私有属性，Firefox等不支持；需结合@supports检测+height-based fallback方案，如line-height×行数设max-height并用::after遮盖。
多行省略为什么不能只靠 -webkit-line-clamp
因为 Firefox、IE 以及部分旧版 Edge 完全不识别 -webkit-line-clamp，它本质是 WebKit 私有属性，不是标准 CSS。你在 Safari 或 Chrome 里看到效果正常，但一开 Firefox 就发现文本直接撑开容器、省略号消失——这不是你写错了，是浏览器根本没实现这个功能。
更麻烦的是，-webkit-line-clamp 在某些场景下会失效：比如父元素用了 float、position: absolute，或者子元素包含 inline 元素（如图标、<span></span>）时，display: -webkit-box 可能被重置或忽略。
所以纯 CSS 多行省略必须分两层处理：WebKit 下用原生方案，其他浏览器 fallback 到基于高度的截断逻辑。
基于高度的兼容方案怎么写才可靠
核心思路是：固定 line-height + 精确控制 max-height + 伪元素遮盖末尾。它不依赖任何私有属性，所有现代浏览器都支持。
-
line-height必须为数值（如1.4），不能是无单位数字以外的形式（比如1.4em会导致计算偏差） -
max-height=line-height × 行数，例如line-height: 1.5em且要显示 3 行 →max-height: 4.5em -
::after伪元素需设置background-color与容器背景一致，否则会露出底色；若背景是渐变/图片，此方案就不可用 - 必须加
overflow: hidden，否则文字会从底部溢出
示例：
.text-clamp-3 {
line-height: 1.5em;
max-height: 4.5em;
overflow: hidden;
position: relative;
}
.text-clamp-3::after {
content: '…';
position: absolute;
right: 0;
bottom: 0;
background: white; /* 必须匹配实际背景 */
padding-left: 0.2em;
}
SCSS 混合宏怎么封装才真正实用
直接硬编码行数会重复写很多类，用 @mixin 抽离是最自然的方式。但要注意两点：一是默认参数要合理（比如多数标题限制 2 行），二是避免和全局 display 冲突（比如已有 display: flex 的容器再套 -webkit-box 会出问题）。
推荐写法：
@mixin clamp-lines($lines: 2, $lh: 1.5) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
text-overflow: ellipsis;
<p>@supports not (-webkit-line-clamp: 1) {
display: block;
line-height: $lh <em> 1em;
max-height: $lines </em> $lh * 1em;
position: relative;</p><pre class="brush:php;toolbar:false;">&::after {
content: '…';
position: absolute;
right: 0;
bottom: 0;
background: inherit;
padding-left: 0.2em;
}} }
使用时：
.product-title {
@include clamp-lines(3, 1.4);
}
注意：@supports not (-webkit-line-clamp: 1) 是关键判断，比 UA 检测更可靠；background: inherit 比写死 white 更适应不同上下文。
哪些情况会悄悄破坏省略效果
最常被忽略的三个点：
- 父元素设置了
white-space: pre-wrap或pre-line—— 会覆盖子元素的white-space: normal，导致换行行为异常 - 文本里全是英文单词或数字，没有中文/空格作为自然断点 → 需补
word-break: break-word或overflow-wrap: break-word - 容器用了
font-size: clamp()或rem动态计算，但max-height仍写死em→ 行高缩放后，max-height不再精确匹配
如果项目中大量使用响应式字体，建议把 SCSS 混合宏升级为接受 $unit 参数，统一用 rem 或 px 计算，避免 em 嵌套失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
