怎样用CSS3实现多行文本展开收起的平滑过渡？-css教程-PHP中文网

max-height过渡动画失效的根本原因是CSS仅对具体像素值插值，auto和none不可计算；必须用scrollHeight动态获取真实高度，并通过强制重排（offsetHeight）触发平滑过渡。

怎样用css3实现多行文本展开收起的平滑过渡？

max-height 过渡动画本身不可靠，直接设 max-height: 0 → max-height: none 会跳变——因为 none 不是可插值数值，浏览器无法计算中间帧。

为什么 `max-height` 动画常失效

根本限制在于：CSS 只对具体数值（如 120px）做插值过渡，auto 和 none 都被当作“非数值”跳过动画。常见错误写法包括：

max-height: 0; transition: max-height 0.3s; → 展开时设 max-height: none，动画不触发，直接显示全量内容
硬编码一个固定值（如 max-height: 300px）→ 实际内容高度浮动时，动画要么提前截断、要么留白明显
用 offsetHeight 或 clientHeight 读取目标高度 → 它们不含溢出部分，无法反映真实滚动高度

必须用 `scrollHeight` 动态设目标值

真正能撑满内容的只有一种高度：element.scrollHeight。它包含所有内容（含溢出），且是精确像素值。但不能直接赋值后立刻开动画——浏览器会合并重排，跳过过渡。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

收起时：先用 getComputedStyle(element).maxHeight 读取当前实际高度 → 设为 max-height → 再设 max-height: 0
展开时：先设 max-height: 0 + overflow: hidden → 立即调用 element.offsetHeight 强制重排 → 再设 max-height: element.scrollHeight
务必在设新 max-height 前加 overflow: hidden，否则收起时可能闪现滚动条

纯 CSS 方案只适用于静态行数场景

如果确定最多显示 n 行（如 3 行），可用 -webkit-line-clamp + 类切换，性能好、无 JS：

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: all 0.4s ease;
}
.text.expanded {
  -webkit-line-clamp: unset;
  display: block;
}

优势：零 JS、渲染快、无障碍友好（按钮可 focus）
缺点：IE 完全不支持；line-height 必须固定，否则行高计算不准；无法动态响应字体缩放或窗口 resize
按钮定位到右下角需配合 ::before 伪元素 + float + flex 包裹容器，否则 calc(100% - Xpx) 在无显式高度的父容器中无效

最易被忽略的一点：无论用 JS 动态方案还是纯 CSS 方案，都要检查文本是否真溢出了再渲染按钮——否则短文本旁也会出现“展开”按钮，体验断裂。判断依据只能是 scrollHeight > clientHeight，而不是字数或行数估算。