如何利用CSS实现多行文本展开收起的动态过渡？-css教程-PHP中文网

-webkit-line-clamp无法做过渡动画，因其是非动画属性，浏览器不支持插值；且切换display: -webkit-box到block会重置盒模型，导致高度过渡中断。

如何利用css实现多行文本展开收起的动态过渡？

为什么直接用 `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，否则超出部分会漏出

示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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 仍跳变。