-webkit-line-clamp无法做过渡动画，因其是非动画属性，浏览器不支持插值；且切换display: -webkit-box到block会重置盒模型，导致高度过渡中断。
为什么直接用 line-clamp 无法做过渡动画
-webkit-line-clamp 是一个非动画属性，浏览器不支持对其做 transition。你写 transition: -webkit-line-clamp 0.3s 完全无效——它只会立即切换，没有中间帧。这是底层限制，不是写法问题。
更麻烦的是，line-clamp 依赖 display: -webkit-box，而一旦切到展开态（比如改成 display: block），整个盒模型重置，height 或 max-height 的过渡也会断掉或跳变。
- 仅适用于 WebKit 内核（Chrome/Safari），Firefox/Edge 不支持
- 无法响应字体大小变化（如 rem 动态缩放时，行高错位）
- 收起态下文本不可选、不可复制（
-webkit-box的副作用）
max-height 过渡怎么写才不跳、不裁、不卡
关键不是设个值就完事，而是要让 max-height 在收起时足够小、展开时足够大，同时避开计算陷阱。
- 收起态设
max-height: 1.2em（单行高度），不是0——0会导致子元素 margin 折叠，视觉上“多空一行” - 展开态设一个安全上限，比如
max-height: 6em（对应 5 行），但必须 ≥ 实际内容最大可能高度；否则会被截断 - 避免用
px，改用em或rem，适配字体缩放和响应式 - 必须加
overflow: hidden，否则超出部分会漏出
示例：
立即学习“前端免费学习笔记（深入）”；
.text-content {
overflow: hidden;
max-height: 1.2em;
transition: max-height 0.3s ease;
}
.text-container.expanded .text-content {
max-height: 6em;
}
用 grid-template-rows 动画的硬伤在哪
想用 grid-template-rows: 1.2em 0fr → 1.2em 3.6em 做动画？不行。fr 单位不能插值，浏览器直接降级为瞬切。哪怕写成 0px → 3.6em，也受限于 Safari 16.4+ 才支持数值间过渡，旧版 Safari 和多数安卓 WebView 仍跳变。
- 必须提前知道最大行数 × 行高 = 目标像素值（如每行
1.2em，最多 3 行 →3.6em） -
grid-template-rows动画对padding/border敏感，需统一用box-sizing: border-box - 若文本含
inline元素（如图标、span），行高计算易失准，导致展开高度不足
JS 驱动时，offsetHeight 强制重排为什么不能省
在 JS 切换 max-height 之前调用 el.offsetHeight，不是为了“取值”，而是触发浏览器同步布局计算（即强制重排）。没有这一步，浏览器可能把两个样式变更合并优化，导致过渡失效。
- 顺序不能错：先设目标高度 →
offsetHeight→ 再设初始高度（收起）或反之（展开） - 不要用
setTimeout替代 —— 它不可靠，尤其在低端设备或高负载下会丢帧 - 如果容器有
transform或will-change，可能干扰重排时机，建议收起/展开前临时移除
容易被忽略的是：过渡时间不能太短（< 0.2s），否则人眼感知不到动画；也不能太长（> 0.4s），否则交互延迟明显。0.3s 是实测平衡点。
