text-overflow: ellipsis和line-clamp不可动画，因二者非数值型属性，无中间态；多行省略动画需用max-height+overflow:hidden配合固定line-height实现，WebKit下需同时设置-webkit-line-clamp和-webkit-box，Firefox则需JS降级处理。
为什么 text-overflow: ellipsis 本身不支持动画
直接给 text-overflow 或 line-clamp 加 transition 没用——这两个属性本身不可动画化。浏览器只对数值型 CSS 属性（比如 max-height、opacity、transform）做插值过渡。line-clamp 是个“开关式”控制，值一变，文本就立刻重排、截断，中间没有中间态。
用 max-height + overflow 模拟可动画的多行截断
核心思路：不用 line-clamp，改用固定行高 × 行数算出 max-height，再配合 transition 动画这个高度值。溢出部分靠 overflow: hidden 隐藏，省略号由 text-overflow: ellipsis 配合 display: -webkit-box 实现（仅 WebKit 内核支持多行 ellipsis）。
实操要点：
- 必须设置
line-height（如1.5），并确保容器font-size固定，否则max-height计算会漂移 -
max-height初始值设为3em（对应 2 行文本：1 行内容 + 1 行省略号预留空间），展开时设为足够大的值（如100vh或具体像素值） - 需同时写
-webkit-line-clamp: 2和display: -webkit-box才能触发 WebKit 的多行省略逻辑；但动画生效靠的是max-height变化，不是它 - 为避免文字闪动，加
will-change: max-height提前提示渲染层优化
Firefox 等非 WebKit 浏览器怎么处理
Firefox 不支持 -webkit-line-clamp，所以纯 CSS 方案在它上面无法显示省略号——只能显示截断（无省略号），或完全不截断。如果必须兼容：
- 用 JavaScript 检测是否支持
line-clamp：CSS.supports('-webkit-line-clamp', '1') - 不支持时，用 JS 动态计算字符数或使用
textContent+getBoundingClientRect()测量高度，手动截断并拼接"…" - 不要依赖
text-overflow: ellipsis在多行场景下的跨浏览器一致性——它本就不是标准多行方案
过渡动画卡顿或闪烁的常见原因
动画不顺通常不是写法错，而是布局触发了重排（reflow）：
- 避免在动画中改变
width、padding、font-size等影响盒模型的属性 -
max-height动画比height更安全，但若初始值设为0，展开时内容高度未知，会导致跳变；建议初始max-height设为最小可能高度（如2.4em），目标设为保守上限 - 若容器有
border或box-shadow，动画期间它们也会参与绘制，可考虑用transform: scaleY()替代（但会缩放文字，需额外修正）
真正稳定的多行省略动画，本质是用 max-height 控制可见区域，靠 WebKit 的 -webkit-line-clamp 渲染省略号——两者各司其职，缺一不可。Firefox 用户看到的只是“展开/收起”，不是“平滑过渡”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
