-webkit-line-clamp 不支持 CSS 变量，因其属非标准旧属性，仅接受数字字面量；现代方案需用 @property 声明类型化变量并配合标准 line-clamp 语法。
为什么 -webkit-line-clamp 不能直接用 CSS 变量控制行数
-webkit-line-clamp 是个“半废弃”的非标准属性，它只接受数字字面量（如 3），不支持 CSS 变量（var(--lines)）或 calc()。浏览器解析时会直接忽略无效值，导致截断失效，回退成不截断状态。
常见错误现象：--lines: 2; + line-clamp: var(--lines); → 控制台无报错，但文本始终不截断，高度撑开。
根本原因：该属性属于「旧式 WebKit 伸缩盒扩展」，未被纳入 CSS Line Clamp Level 1 标准草案，语法层面就不支持动态值。
用 CSS 变量 + @property 实现动态行数（现代方案）
Chrome 103+、Edge 103+、Safari 16.4+ 支持 @property 声明类型化自定义属性，可让 line-clamp 接收变量并触发重计算。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须声明
@property --lines { syntax: '<integer>'; inherits: false; initial-value: 2; }，syntax类型严格限定为<integer>，否则无效 - 使用
line-clamp: var(--lines);（注意不是-webkit-line-clamp）——现代引擎已支持标准语法 - 需同时保留
display: -webkit-box和-webkit-box-orient: vertical，这是布局前提
示例：
@property --lines {
syntax: '<integer>';
inherits: false;
initial-value: 2;
}
<p>.truncate {
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: var(--lines);
overflow: hidden;
}兼容老版本浏览器的降级处理（-webkit-line-clamp + class 切换）
当目标环境包含 Chrome ≤102 / Safari ≤16.3 时，@property 不可用，只能靠预设 class 控制行数。
实操建议：
- 定义固定 class 如
.line-clamp-1、.line-clamp-2，每个 class 内硬编码-webkit-line-clamp: 1等 - 用 JS 动态切换 class：
el.classList.replace('line-clamp-2', 'line-clamp-3')，避免内联 style 覆盖 - 不要用
style.lineClamp = '3'—— 这个 DOM 属性在多数浏览器中根本不存在，且无法触发 -webkit- 前缀行为
注意：Safari 对 -webkit-line-clamp 的实现更严格，若父容器未设置 height 或 max-height，即使写了 -webkit-line-clamp 也可能不生效。
React/Vue 中响应式更新的坑与绕过方式
框架中直接绑定 :class="{ 'line-clamp-3': lines === 3 }" 或 v-bind:class 是安全的；但若尝试用 :style="{ lineClamp: lines }"，会因浏览器不支持而静默失败。
容易踩的坑：
- CSS-in-JS 库（如 styled-components）若生成内联 style，
lineClamp属性会被忽略，且无任何 warning - Vue 3 的
v-bind="$attrs"若透传了linesprop 到 style，同样无效 - 服务端渲染（SSR）时，
@property不会被解析，首次加载可能漏掉截断样式
推荐做法：把行数映射为 class 名字符串（如 const cls = `line-clamp-${lines}`），再绑定到元素上，兼容性最稳。
复杂点在于 Safari 15.6–16.3 对 @property 的支持存在 bug：初始值能生效，但 JS 修改后不重绘。这种场景下，class 切换仍是唯一可靠路径。
