text-overflow: ellipsis仅对单行生效，多行需用-webkit-line-clamp配合display: -webkit-box等属性；它不支持CSS变量、Firefox原生不支持，需JS中转或fallback方案。
text-overflow: ellipsis 只对单行生效，多行要用 -webkit-line-clamp
直接写 text-overflow: ellipsis 对多行文本完全无效，这是最常踩的坑。它只在 white-space: nowrap + overflow: hidden + 固定宽度的单行场景下起作用。想截断 2 行或 3 行并显示省略号，必须用 WebKit 私有属性 -webkit-line-clamp，且需配合 display: -webkit-box 和 -webkit-box-orient: vertical。
实操要点：
-
-webkit-line-clamp必须是整数，不能是var(--lines)（CSS 变量无法在该属性中动态计算） - 父容器需设
height或依赖内容高度，但不能设height: auto（否则截断失效） - 不支持 Firefox 原生（需 fallback 方案，见下文）
用 CSS 变量控制行数，得靠 JavaScript 中转
想通过 --max-lines: 2 这类变量控制截断行数，纯 CSS 做不到。因为 -webkit-line-clamp 不接受自定义属性值，必须硬编码数字。可行路径是：用 JS 读取变量，动态设置内联样式。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.clamp');
const lines = getComputedStyle(el).getPropertyValue('--max-lines').trim();
if (lines && !isNaN(lines)) {
el.style.webkitLineClamp = lines;
}注意：
- 要监听
--max-lines变化？得用MutationObserver或自定义事件，CSS 自身无响应式变量监听机制 - 服务端渲染（SSR）时 JS 未执行，首屏可能不截断——需后端预设固定值或加 loading 占位
- 若同时用 Tailwind，别写
line-clamp-2类覆盖 JS 设置，优先级容易出错
Firefox 和 Safari 兼容性差异要单独处理
Firefox 完全不支持 -webkit-line-clamp；Safari 17+ 开始支持标准语法 line-clamp（无前缀），但旧版仍需 -webkit-。这意味着你至少得写两套规则：
.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* Firefox 忽略 */
line-clamp: 2; /* Safari 17+/Chrome 125+ 支持，Firefox 仍无视 */
}对 Firefox 的 fallback 方案只有两个务实选择：
- 用 JS 实现截断（如按字符数 +
textContent截取 + 插入…，但会破坏换行语义） - 放弃省略号，用
overflow: hidden+ 固定max-height配合line-height计算（例如max-height: calc(1.5em * 2)），视觉上接近但无省略号
性能和可访问性容易被忽略的点
多行省略不是免费的。每次 DOM 更新或窗口 resize，浏览器都要重排并重新计算 -webkit-line-clamp 是否触发截断，尤其在列表页大量使用时，滚动可能卡顿。
更要紧的是可访问性问题：
- 屏幕阅读器通常读取完整文本，但视觉上被截断，用户可能误以为内容已结束
- 没提供“展开/收起”交互？等于主动隐藏信息，WCAG 2.1 要求关键内容不可仅靠视觉呈现
- 如果用 JS 截断，记得同步更新
aria-label或加aria-hidden="true"区分可见/不可见部分
真正需要动态行数控制的场景，比如后台配置文案长度、卡片组件复用，往往绕不开 JS 注入样式这个环节——别试图用纯 CSS 变量“优雅解决”，先保证功能正确和可访问，再优化。
