-webkit-line-clamp 不支持 css 变量和 clamp() 函数，因其是 webkit 私有属性，仅接受字面整数；可用 max-height + calc(var(--lines) * line-height) 模拟，但省略号需 js 实现跨浏览器一致效果。
不能用 CSS 变量直接控制 -webkit-line-clamp 的值——它不接受自定义属性（--lines）或 clamp() 函数，写成 -webkit-line-clamp: var(--lines); 或 -webkit-line-clamp: clamp(1, 3, 5); 都会失效。
为什么 -webkit-line-clamp 不支持 CSS 变量和 clamp()
该属性是 WebKit 私有非标准属性，解析器只接受字面整数（如 2、3），不参与 CSS 自定义属性计算流程，也不支持函数式表达式。即使现代浏览器已支持 clamp() 在 font-size、max-height 等地方，-webkit-line-clamp 仍被硬编码为“仅整数字面量”。
用 CSS 变量 + max-height 模拟动态行数（仅限固定行高场景）
当行高稳定（如 line-height: 1.4em），可把行数逻辑转移到 max-height 上，再用变量驱动：
-
--lines: 2→max-height: calc(var(--lines) * 1.4em) - 必须配
overflow: hidden和display: -webkit-box等基础声明，否则截断无效 - 需确保容器无 padding 干扰高度计算，或把 padding 移到子元素上
- Firefox 下此方案仅靠
max-height + overflow: hidden截断，无省略号；若需统一省略号，仍得 JS fallback
.dynamic-clamp {
--lines: 2;
line-height: 1.4em;
max-height: calc(var(--lines) * 1.4em);
overflow: hidden;
/* WebKit 省略号部分仍需静态值 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里不能写 var(--lines) */
text-overflow: ellipsis;
}
真正可变的行数控制只能靠 JavaScript
若业务要求“同一组件在不同区域显示 1/2/3 行”，且需全浏览器一致表现，CSS 变量只是辅助，核心逻辑必须由 JS 承担：
- 读取元素上的
data-lines或style="--lines: 3"，转为整数 - 对 WebKit 浏览器：动态设置
el.style.webkitLineClamp = lines - 对 Firefox：用
textContent+ 字符数估算 +clientHeight对比做逐字截断 - 避免在 Vue/React 中直接操作
style.webkitLineClamp后不触发重绘——建议加el.offsetHeight强制回流 - Autoprefixer 会破坏
-webkit-box-orient，务必在对应样式块加/* autoprefixer: off */
最易被忽略的一点：所谓“用 CSS 变量控制行数”，实际只是控制高度阈值或 JS 的输入参数，-webkit-line-clamp 本身永远是硬编码的常量。别在构建后检查它是否响应了变量变化——它根本不会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
