line-clamp需配合display:-webkit-box和-webkit-box-orient:vertical使用，仅WebKit有效；Firefox需JS测行数fallback；展开动画宜用scrollHeight计算高度而非max-height；SSR需服务端预估+客户端校准。
用 line-clamp 实现多行文本截断+展开
现代 CSS 里最直接的解法就是 display: -webkit-box 配合 -webkit-line-clamp，但它只在 WebKit 内核（Chrome、Safari、Edge 新版）有效，Firefox 原生不支持。别指望它跨浏览器开箱即用。
常见错误是只写 line-clamp 却漏掉 display: -webkit-box 和 -webkit-box-orient: vertical，三者缺一不可：
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 截 3 行 */
overflow: hidden;
}注意：-webkit-line-clamp 是个“显示控制”属性，不是“高度限制”，它依赖父容器有明确高度或内容流式撑开；如果父元素 height 固定且过小，可能提前截断或文字被裁掉一半。
Firefox 下必须靠 JS 检测行数做 fallback
CSS 无法在 Firefox 里可靠判断“到底几行溢出了”，所以得用 JS 测量：把文本塞进一个临时 div，设为 visibility: hidden，再对比自然高度和容器高度。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
getComputedStyle(el).lineHeight返回的是字符串（如"24px"），得用parseFloat转数字才能算行数 - 别用
offsetHeight直接除以行高——字体渲染、padding、border都会影响结果，误差常达 ±1 行 - 推荐用
el.scrollHeight > el.clientHeight先粗判是否溢出，再精确计算
示例逻辑：
function getLineCount(el) {
const style = getComputedStyle(el);
const lineHeight = parseFloat(style.lineHeight) || 1.2 * parseFloat(style.fontSize);
return Math.floor(el.scrollHeight / lineHeight);
}展开/收起交互别只靠 max-height 动画
用 max-height: 0 → max-height: 500px 做展开动画，看着简单，实际容易卡顿或闪跳，尤其文本长、字体多时。
问题根源：
-
max-height动画本质是“猜高度”，浏览器要反复重排重绘 - 若内容含图片或异步加载字体，真实高度可能在动画中突变
- 移动端 Safari 对
max-height动画优化差，常掉帧
更稳的做法是：JS 先算出目标高度（scrollHeight），再设 height: 0 → height: ${target}px，配合 overflow: hidden。动画结束再清空 height 改回 auto。
服务端渲染（SSR）或首屏直出时的隐藏陷阱
如果文本来自后端模板直出，而 JS 还没执行，用户会看到完整文本或突兀截断——line-clamp 不会自动生效，JS fallback 更不会跑。
稳妥方案：
- 服务端预估行数（按字符数 + 字体宽度粗略算），加个
data-lines="3"属性 - CSS 用
[data-lines="3"]触发截断样式，保证首屏一致 - JS 加载后重新校准，覆盖掉预估值（比如发现其实只占 2 行，就移除截断类）
别忽略字体加载延迟：font-display: swap 下，初始渲染可能用备用字体，行高不同，导致截断错位。真要严控，得等 document.fonts.load() 完成后再触发测量。
行数不确定这事，没有纯 CSS 的银弹。浏览器能力不齐、字体加载不可控、服务端无 DOM，每个环节都得补一层判断——不是写对一个 line-clamp 就完事了。
