-webkit-line-clamp不支持css变量直接赋值，必须用js设置element.style.webkitlineclamp = 'n'并同步配置display: -webkit-box和-webkit-box-orient: vertical；firefox不支持该属性，需降级为max-height方案。
用 --clamp-lines 变量配合 -webkit-line-clamp 实现动态控制
现代 CSS 支持通过自定义属性（CSS 变量）驱动 -webkit-line-clamp，从而在不重写样式、不切换 class 的前提下动态调整截断行数。但必须注意：该变量不能直接用于 -webkit-line-clamp 属性值中——因为该属性**不接受 CSS 变量作为计算值**，需靠 JavaScript 注入内联样式生效。
-
-webkit-line-clamp本身不支持var(--clamp-lines)写法，写死会失效 - 必须用 JS 调用
element.style.setProperty('--clamp-lines', '4')配合 CSS 中的calc()或伪类降级逻辑才起作用（实际仍需 fallback） - 更可靠的做法是直接设置内联
-webkit-line-clamp值：element.style.webkitLineClamp = '4' - 若坚持用变量，CSS 中需搭配
@property（仅 Chrome 122+ 支持）声明类型，否则变量会被忽略
为什么 setProperty('--clamp-lines', 'n') 单独调用没反应
单纯设置 CSS 变量值，而未在样式规则中将其“连接”到 -webkit-line-clamp，浏览器不会自动映射。下面这段代码无效：
.dynamic-clamp {
--clamp-lines: 2;
-webkit-line-clamp: var(--clamp-lines); /* ❌ 不生效 */
}
正确做法是让 JS 直接操作内联样式，绕过变量中间层：
const el = document.querySelector('.text');
el.style.webkitLineClamp = '4'; // ✅ 生效
el.style.overflow = 'hidden'; // 必须同步设置
el.style.display = '-webkit-box';
el.style.webkitBoxOrient = 'vertical';
Firefox 和 Safari 等非 WebKit 浏览器怎么处理变量控制
Firefox 完全不支持 -webkit-line-clamp，Safari 16.4+ 开始支持，但 Safari iOS 16.5 之前存在 text-overflow: ellipsis 不显示省略号的 bug。这意味着：用变量控制行数的方案本质是 WebKit-only 特性，无法跨浏览器统一实现。
- Firefox 下只能降级为固定
max-height+line-height截断，且无省略号 - 若要统一行为，需用 JS 检测是否支持
-webkit-line-clamp：CSS.supports('line-clamp', '3')（注意：实际应检测'-webkit-line-clamp'） - 对不支持的浏览器，变量可转为控制
max-height：max-height: calc(var(--clamp-lines) * 1.5em)，但此方式末尾无省略号，且换行/字体缩放时易错位
容易被忽略的关键点：display 和 box-orient 必须同时存在
即使 -webkit-line-clamp 值正确，如果遗漏 display: -webkit-box 或 -webkit-box-orient: vertical，截断完全不会触发——这不是警告，是静默失效。
-
display: flex或display: block替代-webkit-box→ 截断失效 -
-webkit-box-orient: horizontal→ 文本被压成一行再截断，失去多行语义 - 使用
display: -webkit-box时，子元素的margin、padding可能被忽略，建议用padding控制容器内边距，而非子元素外边距 - 某些旧版 Safari（如 15.6）要求
text-overflow: ellipsis必须显式声明才显示省略号，即使文档说默认生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
