SCSS封装-webkit-line-clamp必须关闭Autoprefixer，否则私有属性被删除；需用/ autoprefixer: off /注释包裹mixin，并包含display: -webkit-box、-webkit-box-orient: vertical及overflow: hidden等完整声明。
SCSS封装-webkit-line-clamp时必须关掉autoprefixer
直接在SCSS里写-webkit-line-clamp: 2会被autoprefixer自动删掉或转义，因为它是非标准私有属性。不加干预，编译后样式就失效。
必须在对应CSS块前加注释指令让autoprefixer跳过：
-
/* autoprefixer: off */—— 整个块都跳过（最常用） -
/* autoprefixer: ignore next */—— 只忽略下一行
否则即使SCSS mixin写得再漂亮，最终生成的CSS里也不会有-webkit-line-clamp。
用SCSS mixin控制行数并复用
把多行省略的核心逻辑抽成mixin，能避免重复写一堆-webkit-前缀。注意display: -webkit-box和-webkit-box-orient: vertical也得一并包含，缺一不可。
示例写法：
/* autoprefixer: off */
@mixin line-clamp($lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
text-overflow: ellipsis;
}
使用时：
.desc {
@include line-clamp(3);
width: 300px;
line-height: 1.5;
}
关键点：
-
$lines设默认值2，调用时可覆盖，比如@include line-clamp(1)也能当单行用（但不如原生单行方案可靠） - 必须手动设置
width或max-width，否则-webkit-line-clamp不触发 -
line-height建议显式声明，避免不同字体下截断位置偏差
为什么不能只靠text-overflow: ellipsis实现多行
text-overflow: ellipsis本身只对单行生效，哪怕你写了white-space: normal + overflow: hidden，它也不会在第二行末尾加省略号——浏览器根本不支持这个组合。
真正起作用的是-webkit-line-clamp这套Webkit私有机制，它依赖于display: -webkit-box的盒模型行为。Firefox从68+开始支持该属性，但IE完全不支持，Edge旧版也不认。
所以别试图“纯标准CSS多行省略”，目前没有跨浏览器无JS的通用解法；能用-webkit-line-clamp的地方，就老老实实按它的规则来。
容易被忽略的高度与行高陷阱
即使CSS全写对了，如果容器高度没预留够，或者line-height和font-size不匹配，省略号可能被裁掉、错位，甚至整段消失。
计算公式：最小容器高度 ≈ $lines × line-height（单位一致，比如都是px）
常见问题：
- 用了
rem或em做line-height，但父元素font-size动态变，导致实际行高浮动 - 设置了
height但没留出省略号垂直空间，最后一行文字被截半 - 字体加载延迟（如自定义Web Font），初始渲染时按默认字体算行高，字体加载后再重排，省略位置偏移
稳妥做法是：固定line-height为数值（如1.4），容器用min-height而非height，并确保font-display: swap减少FOIT影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
