怎么在CSS中处理长文本溢出省略号展开动画？-css教程-PHP中文网

text-overflow: ellipsis 和 -webkit-line-clamp 不支持 transition，因其为开关型属性、不可插值；需改用 max-height + line-height 计算实现可动画多行截断，并注意浏览器兼容性与渲染性能优化。

怎么在css中处理长文本溢出省略号展开动画？

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 提前提示浏览器优化渲染层，减少卡顿

示例片段：

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

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

下载

.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;
}
</p>

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），否则首次渲染可能不准