line-clamp 在 firefox 中不生效，因其原生仅被 webkit/blink 内核支持；需同时满足 display: -webkit-box、-webkit-box-orient: vertical 和 line-clamp: n 三条件才在 chrome/safari/edge 生效。
line-clamp 为什么在 Firefox 里不生效
line-clamp 是 CSS 中控制多行文本截断的核心属性，但它属于 display: -webkit-box 的配套机制，**原生只被 WebKit/Blink 内核支持（Chrome、Safari、Edge）**。Firefox 目前完全不识别 line-clamp，即使写了也不会触发截断+省略号行为。
常见错误是只写 line-clamp: 2 却忽略前置条件，导致在 Chrome 里也不生效。必须同时满足三个条件：
display: -webkit-box-webkit-box-orient: vertical-
line-clamp: N（N 为整数）
缺一不可。仅靠 overflow: hidden; text-overflow: ellipsis; 对多行无效——那俩只对单行起作用。
用伪元素 + JS 模拟 line-clamp 的兼容方案
当必须支持 Firefox 或旧版 Edge（≤17）时，纯 CSS 失效，得退回到「伪元素 + 脚本」组合。核心思路是：用 JS 计算容器高度，逐字/逐词截断内容，再手动补上 …。
但更稳妥的做法是用伪元素占位 + JS 控制显示逻辑，避免破坏语义和 SEO：
- HTML 中保留完整文本，不提前截断
- CSS 设置
::after { content: "…"; }，默认隐藏 - JS 判断
offsetHeight ，成立则显示伪元素 - 注意监听窗口 resize 和字体加载完成（
document.fonts.ready），否则初渲染可能误判
示例关键代码片段：
if (el.scrollHeight > el.offsetHeight) {
el.style.setProperty('--show-ellipsis', '1');
}
对应 CSS：
.text::after {
content: "...";
opacity: var(--show-ellipsis, 0);
}
line-clamp 的性能隐患与渲染抖动
启用 line-clamp 后，浏览器需对文本做行高计算和换行重排，尤其在长列表中（如新闻卡片流），滚动时可能引发 layout thrashing。
容易被忽略的点：
-
line-clamp会强制触发同步布局（sync layout），在will-change: transform元素上叠加使用，可能让 GPU 加速失效 - 如果父容器宽度假设为固定值，但实际受 flex 或 grid 影响动态变化，
line-clamp可能滞后一帧才重算，出现短暂溢出 - 中文混排英文/数字时，某些字体下断行位置不稳定，导致省略号出现在不该断的地方（比如“v1.2…”而不是“v1…”）
建议在高频滚动区域慎用，优先考虑服务端截断或预计算字符长度。
伪元素实现省略号时的换行与对齐问题
用 ::after 手动加 … 看似自由，但实际常遇到两个硬伤：省略号换行、与末行文字不对齐。
解决方式取决于布局上下文：
- 若文本块是
display: inline-block，给::after加vertical-align: bottom并设置line-height匹配 - 若用
flex布局，把::after放进同一 flex 容器，用margin-left: auto推到末尾，避免换行 - 绝对定位虽能精准控制位置，但脱离文档流后，无法响应容器尺寸变化，需配合 ResizeObserver 重定位
最简稳解：不用伪元素，改用 text-overflow: ellipsis 配合单行限制；真要多行，就接受 line-clamp 的浏览器限制，或引入轻量库如 clamp.js。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
