CSS 如何实现多行文本展开收起效果

小鱼儿 2022-09-04 12:49 13阅读 0赞

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

![0b8a0576a919fecadf2a90af44b2213e.png][]

最终实现效果：

![d633ff93237d4ca5ac7e660501dad1c3.gif][]

本文主要实现难点：

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

初始 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>

![43a1c8663893982696a95caebc4c96f1.png][]

## 控制按钮文字环绕效果 ##

一般展开、收起按钮都在文字的右下脚：

*  局右：`float: right`
 *  局下：`margin-top`

但 `margin` 虽然可以将按钮局下，但它无法实现文字环绕效果，所以我们这里利用伪元素实现：

*  局右：`float: right`
 *  局下：`.text::before`

### 局右 ###

.text::before{
        content: '';
        float: right;
    }

![6cd3906907e7b539ffbcc7ea7772fcef.png][]

### 局下 ###

.text::before{
        content: '';
        float: right;
        width: 0;
        height: calc(100% - 20px);
    }

我们发现出现了高度塌陷（ `calc(100% - 20px)` 无效）的问题：

> 由于包含块的高度没有显式指定，并且该元素不是绝对定位，则计算值伪 auto，auto \* 100/100 = NaN
> 
> — CSS 世界

此时解决办法有：

*  设置显式的高度值：这里高度是动态的，没办法显式指定，所以此方法不可用❌
 *  如果包含块的高度显式指定，则设置该元素为绝对定位：包含块的高度是动态的，没办法显式指定，所以此方法也不可用❌
 *  在元素外边包一层具有包裹性又具有定位特性的标签：✅

这里包一层 flex 布局。因为在 flex 布局的子项中，可以通过百分比来计算变化高度，因此，这里需要给 `.text` 包裹一层，然后设置 `display: flex`

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

![25594de21a3b5af507ef4acb73a466e6.png][]

## 多行文本溢出省略效果 ##

我们在 [CSS 实现文本的单行和多行溢出省略效果][CSS] 介绍过：

**多行文本（css）**

.text {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

*  `-webkit-line-clamp: 3`（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。为了实现该效果，它需要组合其他的WebKit属性）
 *  `display: -webkit-box`（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
 *  `-webkit-box-orient: vertical`（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
 *  `overflow: hidden`（文本溢出限定的宽度就隐藏内容）
 *  `text-overflow: ellipsis`（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)

![e13c4fde1266015b02cdb6a00085a9a7.png][]

## 如何实现 `展开` 和 `收起` 的状态切换 ##

使用 `input type="checkbox"` 控制展开与收起效果

<input type="checkbox" id="exp" />
    
    <style>
      #exp {
        visibility: hidden;
      }
      #exp:checked+.text{
        -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
      }
    </style>

![e087cbb71cfffefa79ad6a1a2db58c5a.png][]

但文字展开后控制按钮依然显示 `展开` ，应该显示 `收起` 才对

这里使用伪类生成技术，具体做法就是去除或者隐藏按钮里面的文字，采用伪元素生成

<label class="btn" for="exp"></label>
    <style>
      .btn::after{
        content:'展开'
      }
      #exp:checked+.text .btn::after{
        content:'收起'
      }
    </style>

最终，大功告成：

![f0249f93fa0f7433a421d8d72ddd729f.gif][]

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

号内回复：

「**网络**」，自动获取三分钟学前端网络篇小书（90+页）

「**JS**」，自动获取三分钟学前端 JS 篇小书（120+页）

「**算法**」，自动获取 github 2.9k+ 的前端算法小书

「**面试**」，自动获取 github 23.2k+ 的前端面试小书

「**简历**」，自动获取程序员系列的 `120` 套模版

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的

[0b8a0576a919fecadf2a90af44b2213e.png]: /images/20220829/9434b7deaf3c4fedba76de94f4215108.png
[d633ff93237d4ca5ac7e660501dad1c3.gif]: /images/20220829/306068c7d20b4b38abc16d7747348908.png
[43a1c8663893982696a95caebc4c96f1.png]: /images/20220829/3d704e6b414145b8867cbbec1211eed9.png
[6cd3906907e7b539ffbcc7ea7772fcef.png]: /images/20220829/33d57f71548848aa892a3b25fd702d6f.png
[25594de21a3b5af507ef4acb73a466e6.png]: /images/20220829/bec35ac6d3f34bb68280bfb6e2645270.png
[CSS]: http://mp.weixin.qq.com/s?__biz=Mzg2NjUxOTM2Mg%3D%3D&chksm=ce48d3e2f93f5af4be2df74aae510a866b9c218733d2608c517e85ba8642e1663fc5f0ddb0b5&idx=1&mid=2247484367&scene=21&sn=3b086c53b754e6884128e839d74c0c6b#wechat_redirect
[e13c4fde1266015b02cdb6a00085a9a7.png]: /images/20220829/161cc16a4b994471a8cccf3ee615e6a2.png
[e087cbb71cfffefa79ad6a1a2db58c5a.png]: /images/20220829/1a79166c4d7b43d8a10ac7045950025f.png
[f0249f93fa0f7433a421d8d72ddd729f.gif]: /images/20220829/a4f160b854a04cfc9b26777c8eac2fb8.png