text-overflow: ellipsis 和 -webkit-line-clamp 不支持 transition，因其为开关型属性、不可插值；需改用 max-height + line-height 计算实现可动画多行截断，并注意浏览器兼容性与渲染性能优化。
text-overflow: ellipsis 和 -webkit-line-clamp 本身不能加 transition，强行写没效果——这不是你代码写错了，是浏览器根本不支持动画化这两个属性。
为什么直接给 line-clamp 加 transition 没用
因为 -webkit-line-clamp 是个“开关型”值：设为 2 就立刻截断两行，设为 99 就全显示，中间没有过渡状态。浏览器只对数值型、可插值的 CSS 属性（比如 max-height、opacity）做动画。而 line-clamp 触发的是文本重排（reflow），不是渐变绘制（repaint）。
常见错误现象：
- 写了 transition: -webkit-line-clamp 0.3s，但展开/收起是瞬时跳变
- 动画过程中文字闪烁、错位，甚至高度塌陷
- 不要试图用
@keyframes动画line-clamp—— 它不接受百分比或中间值 -
text-overflow同理，ellipsis不是长度值，无法插值 - 真正能动的，只有容器的尺寸、透明度、缩放等渲染层属性
用 max-height 实现可动画的多行截断
核心思路：放弃依赖 line-clamp 做动画，改用固定 line-height × 行数算出 max-height，再对这个高度做 transition。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
line-height（如1.5），且容器font-size固定，否则max-height计算会漂移 - 初始
max-height设为3em（例如 2 行内容 + 预留省略号空间），展开目标设为足够大值（如100vh或10em） - 仍需保留
display: -webkit-box和-webkit-line-clamp: 2，否则 WebKit 下不触发多行省略逻辑（但动画靠的是max-height，不是它） - 加
will-change: max-height提前提示浏览器优化渲染层，减少卡顿
示例片段：
.text-toggle {
line-height: 1.5;
font-size: 14px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
transition: max-height 0.3s ease, opacity 0.2s ease;
will-change: max-height;
}
<p>.text-toggle.expanded {
max-height: 10em;
}
Firefox 和非 WebKit 浏览器怎么兼容
Firefox 不支持 -webkit-line-clamp，所以纯 CSS 方案下：它要么不截断（文字撑开容器），要么截断但不显示省略号（仅靠 overflow: hidden 硬切）。
可靠做法是检测支持性，再降级：
- 用
CSS.supports('-webkit-line-clamp', '1')判断是否可用 - 不支持时，别硬套 CSS 方案——改用 JS 动态测量：获取容器
clientHeight和单行line-height，反推可容纳行数，再用textContent+slice()或getBoundingClientRect()截断拼接"…" - 注意：JS 截断需监听
resize和字体加载完成（document.fonts.ready），否则首次渲染可能不准
别把 text-overflow: ellipsis 当成跨浏览器多行方案——它本就不是标准多行能力，只是 WebKit 的私有延伸。
真正容易被忽略的点：动画卡顿往往不是 max-height 写得不对，而是容器有 border、box-shadow 或父级触发了 transform，导致每次重绘都触发合成层切换。这种情况下，max-height 动画会变慢甚至掉帧——优先检查这些隐性开销。
