CSS 实现多行文本展开收起效果极简教程

最新推荐文章于 2025-05-19 08:59:54 发布

三分钟学前端

最新推荐文章于 2025-05-19 08:59:54 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/sisterAn/article/details/119747124

本文介绍了如何使用CSS实现多行文本的展开收起效果，包括控制按钮的文字环绕、多行文本溢出省略及状态切换。通过设置伪元素和CSS布局解决文字环绕和高度塌陷问题，利用`line-clamp`实现文本溢出省略，通过`toggle`控制展开和收起状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终实现效果：

本文主要实现难点：

如何实现 展开 和 收起 切换按钮的文字环绕效果
如何实现多行文本溢出省略效果
如何实现 展开 和 收起 的状态切换

初始 html：

<div class="text">
  <label class="btn">展开</label>
  <span>
    但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
    里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
    长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
    是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
    马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出</span>
</div>
<style>
  .text {
    width: 475px;
    border: aqua solid 1px;
    color: #333;
    font-size: 14px;
  }
  .btn {
    color: dodgerblue;
    cursor: pointer;
  }
</style>