line-clamp 不能直接用 css 变量控制行数，因为其值必须是无单位数字字面量，不接受变量计算结果；需通过 js 读取 css 变量并动态设置 style.webkitlineclamp，同时确保 display: -webkit-box 等配套属性生效。
line-clamp 为什么不能直接用 CSS 变量控制行数
因为 line-clamp 是一个复合属性，其值（如 3）必须是无单位数字字面量，不接受 CSS 变量计算结果。即使写成 line-clamp: var(--lines);，浏览器也会忽略——这不是兼容性问题，而是规范限制。
用 -webkit-line-clamp + CSS 变量配合 JS 动态设置
核心思路：保留 -webkit-line-clamp 的实际生效能力，但通过 JS 把变量值注入到内联样式或伪元素 content 中触发重排。纯 CSS 无法动态更新 -webkit-line-clamp，必须借力 JS。
- 先在 CSS 中定义变量：
:root { --lines: 2; } - 用 JS 读取变量值：
getComputedStyle(document.documentElement).getPropertyValue('--lines').trim() - 将该值设为元素的
style.webkitLineClamp（注意驼峰写法） - 必须同时设置
display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden，否则无效
避免重复计算和重排的优化点
每次修改 --lines 都触发重排成本高，尤其在滚动列表中。更稳妥的做法是预设几组 class，用 JS 切换而非内联 style：
- 定义
.clamp-1 { -webkit-line-clamp: 1; }、.clamp-2 { -webkit-line-clamp: 2; }等 - JS 根据
--lines值决定添加哪个 class，而不是直接操作style - 若需响应式变化（如屏幕缩放后调整行数），监听
resize时重新读取变量并切换 class - 注意：Safari 16.4+ 支持原生
line-clamp（无前缀），但依然不支持变量，所以前缀方案仍是主流
服务端渲染或静态站点的替代方案
如果 JS 不可用（如邮件模板、SSG 静态页），只能放弃变量驱动，改用预设类名或后端逻辑生成固定值：
- 用
text-overflow: ellipsis+white-space: nowrap控制单行，这是唯一纯 CSS 可变方案 - 多行省略必须依赖
-webkit-line-clamp或 JS 截断（如用textContent+ 字符计数 +slice()拼接…） - 若用 JS 截断，注意中英文混排时按视觉宽度（非字符数）截断更准确，可借助
canvas.measureText或第三方库如string-pixel-width
真正麻烦的不是怎么写，而是当 --lines 被其他规则覆盖、或父容器 height 冲突导致省略失效时，很难定位——建议始终用 outline: 1px dashed red 临时检查实际渲染高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
