CSS 实现多行文本“展开收起”

淡淡的烟草味﹌ 2023-01-23 02:54 862阅读 0赞

——————— Y · F · E ———————

![957c4fe0b7853ad43aeb4c4e5f5bacd1.png][]

多行文本展开收起是一个很常见的交互， 如下图演示

![f42e671dc751958eb52dd758cdfde77c.gif][] 实现这一类布局和交互难点主要有以下几点：

*  位于多行文本右下角的“展开收起”按钮
 *  “展开”和“收起”两种状态的切换
 *  当文本不超过指定行数时，不显示“展开收起”按钮

说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，vue-clamp\[1\] 就是这么做的），更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，其实纯 CSS 也能完美实现的，下面就一步一步来看看如何实现吧~

一

# **一、位于右下角的“展开收起”按钮** #

很多设计同学都喜欢这样的设计，把按钮放在右下角，和文本**混合**在一起，而不是单独一行，视觉上可能更加舒适美观。先看看多行文本截断吧，这个比较简单

**1.多行文本截断**

假设有这样一个 html 结构

<div class="text">
    浮动元素是如何定位的
    正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
    </div>

多行文本超出省略大家应该很熟悉这个了吧，主要用到用到 **line-clamp**，关键样式如下

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

![87c21298d24fb8b813c4a4f3ddc2c26f.png][]

**2.右下角环绕效果**

提到**文本环绕效果**，一般能想到 **浮动 float** ，没错千万不要以为浮动已经是过去式了，具体的场景还是很有用的；比如下面放一个按钮，然后设置浮动

<div class="text">
      <button class="btn">展开</button>
      浮动元素是如何定位的
    正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
    </div>

.btn {
      float: left;
      /*其他装饰样式*/
    }

![05d0c81d9bdec8b283bba06461e968bd.png][]

如果设置右浮动

.btn {
      float: right;
      /*其他装饰样式*/
    }

![709f9d68bf845015619c0e3d0e9c117a.png][]

这时已经有了**环绕**的效果了，只是位于右上角，如何将按钮移到右下角呢？先尝试一下 **margin**

.btn {
      float: right;
      margin-top: 50px;
      /*其他装饰样式*/
    }

![072a4a4154470ae809a1610441d71b8b.png][]

可以看到，虽然按钮到了右下角，但是文本却没有环绕按钮上方的空间，空出了一大截，无能为力了吗？

虽然 margin 不能解决问题，但是整个文本还是受到了浮动按钮的影响，如果有多个浮动元素会怎么样呢？这里用伪元素来 **::before** 代替

.text::before{
      content: '';
      float: right;
      width: 10px;
      height: 50px;/*先随便设置一个高度*/
      background: red
    }

![47a7216d349c3c4f1ba0b562209d561b.png][]现在按钮到了伪元素的左侧，如何移到下面呢？很简单，清除一下浮动 **clear: both;** 就可以了

.btn {
      float: right;
      clear: both;
      /*其他装饰样式*/
    }

![e67efe2a3b4748a447657654a0691edd.png][]

可以看到，现在文本是完全环绕在右侧的两个浮动元素了，只要把红色背景的伪元素宽度设置为 0（或者不设置宽度，默认就是 0），就实现了右下角环绕的效果

.text::before{
      content: '';
      float: right;
      width: 0; /*设置为0，或者不设置宽度*/
      height: 50px;/*先随便设置一个高度*/
    }

![a6805f974b4e9999b838f0f91715472f.png][]

**3.动态高度**

上面虽然完成了右下加环绕，但是高度是固定的，如何动态设置呢？这里可以用到 calc 计算，用整个容器高度减去按钮的高度即可，如下

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

![437aaa059334cc5b2822e7f111bdc5da.png][]

很可惜，好像并没有什么效果，打开控制台看看，结果发现 calc(100% - 24px) 计算高度为 0

![07d485d8622afdc4fbed7fc2b7f60f8c.png][]

原因其实很容易想到，就是 高度 **100% 失效** 的问题，关于这类问题网上的分析有很多，通常的解决方式是给父级指定一个高度，但是这里的高度是动态变化的，而且还有展开状态，高度更是不可预知，所以设置高度不可取。

除此之外，其实还有另一种方式，那就是利用 **flex 布局**。大概的方法就是在 **flex 布局** 的子项中，可以通过百分比来计算变化高度，具体可参考 w3.org 中关于css-flexbox\[2\]的描述

> If the flex item has **align-self: stretch**, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

因此，这里需要给 .text 包裹一层，然后设置 **display: flex**

<div class="wrap">
      <div class="text">
        <button class="btn">展开</button>
        浮动元素是如何定位的
      正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
      </div>
    </div>

.wrap{
      display: flex;
    }

> 实践下来，display: grid 和 display: -webkit-box 同样有效，原理类似

这样下来，刚才的计算高度就生效了，改变文本的行数，同样位于右下角~

![821f467b72292fcf73eaa356daff20d8.png][]

除此之外，动态高度也可以采用负的 margin 来实现（性能会比 calc 略好一点）

.text::before{
      content: '';
      float: right;
      width: 0;
      /*height: calc(100% - 24px);*/
      height: 100%;
      margin-bottom: -24px;
    }

到这里，右下角环绕的效果就基本完成，省略号也是位于展开按钮之前的，完整代码可以查看 codepen 右下角多行展开环绕效果\[3\]

##  ##

**4.其他浏览器的兼容处理**

上面的实现是最完美的处理方式。原本以为兼容性没什么大问题的，毕竟只用到了文本截断和浮动，**-webkit-line-clamp** 虽然是 **-webkit-** 前缀，不过 **firefox** 也是支持的，打开一看傻了眼，**safari** 和 **firefox** 居然全乱了！

![f81a4806dcfee7d8c9977708c094b633.png][]

这就有点难受了，前面那么多努力都白费了吗？不可能不管这两个，不然就只能是 demo 了，无法用于生产环境。

赶紧打开控制台看看是什么原因。一番查找，结果发现是 **display: -webkit-box**，设置该属性后，原本的文本好像变成了一整块，浮动元素也无法产生环绕效果，去掉之后浮动就正常了

![d0b3576fd4c0158565a1895f4869075a.gif][]

那么问题来了：**没有 display: -webkit-box 怎么实现多行截断呢 ？**

其实上面的努力已经实现了右下角环绕的效果，如果在知道行数的情况下设置一个最大高度，是不是也完成了多行截断呢？为了便于设置高度，可以添加一个**行高 line-height**，如果需要设置成 3 行，那高度就设置成 **line-height \* 3**

.text {
      /*
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      */
      line-height: 1.5;
      max-height: 4.5em;
      overflow: hidden;
    }

为了方便更好的控制行数，这里可以把常用的行数通过属性选择器独立出来（通常不会太多），如下

[line-clamp="1"] {
      max-height: 1.5em;
    }
    [line-clamp="2"] {
      max-height: 3em;
    }
    [line-clamp="3"] {
      max-height: 4.5em;
    }
    ...

<div class="text" line-clamp="3">
    ...
    </div>
    
    <div class="text" line-clamp="5">
     ...
    </div>

![5722b218bdd6e08e01b23176bd659aaa.png][]可以看到基本上正常了，除了没有省略号，现在加上省略号吧，跟在展开按钮之前就可以了，可以用伪元素实现

.btn::before{
      content: '...';
      position: absolute;
      left: -10px;
      color: #333;
      transform: translateX(-100%)
    }

![722509e4a66634f4b7d55b62d36af2d6.png][]

这样，**Safari** 和 **Firefox** 的兼容布局基本上就完成了，完整代码可以查看 codepen 右下角多行展开环绕效果（全兼容）\[4\]

一

#  #

**二、“展开” 和 “收起” 两种状态**

提到 CSS 状态切换，大家都能想到 **input type="checkbox"** 吧。这里我们也需要用到这个特性，首先加一个 **input** ，然后把之前的 **button** 换成 **label** ，并且通过 **for** 属性关联起来

<div class="wrap">
      <input type="checkbox" id="exp">
      <div class="text">
        <label class="btn" for="exp">展开</label>
        浮动元素是如何定位的
      正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
      </div>
    </div>

这样，在点击 **label** 的时候，实际上是点击了 **input** 元素，现在来添加两种状态，分别是只显示 3 行和不做行数限制

.exp:checked+.text{
      -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
    }

兼容版本可以直接设置最大高度 **max-height** 为一个较大的值，或者直接设置为 **none**

.exp:checked+.text{
      max-height: none;
    }

![52b4be3c0c820179af82e7af1d037d87.gif][]这里还有一个小问题，“展开”按钮在点击后应该变成“收起”，如何修改呢？

有一个技巧，凡是碰到需要动态修改内容的，都可以使用伪类 **content** 生成技术，具体做法就是去除或者隐藏按钮里面的文字，采用伪元素生成

<label class="btn" for="exp"></label><!--去除按钮文字--

.btn::after{
      content:'展开' /*采用content生成*/
    }

添加 **:checked** 状态

.exp:checked+.text .btn::after{
      content:'收起'
    }

兼容版本由于前面的省略号是模拟出来的，不能自动隐藏，所以需要额外来处理

.exp:checked+.text .btn::before {
        visibility: hidden; /*在展开状态下隐藏省略号*/
    }

![fc7ad880bfa0ec890bed0c97671eec47.gif][]

基本和本文开头的效果一致了，完整代码可以查看 codepen 多行展开收起交互\[5\]，兼容版本可以查看 codepen 多行展开收起交互（全兼容）\[6\]

还有一点，如果给 **max-height** 设置一个合适的值，注意，**是合适的值**，具体原理可以参考CSS 奇技淫巧：动态高度过渡动画\[7\]，还能加上过渡动画

.text{
      transition: .3s max-height;
    }
    .exp:checked+.text{
      max-height: 200px; /*超出最大行高度就可以了*/
    }

![dc850f471916aa51c7b429e31f6a7a55.gif][]

一

#  #

**三、文本行数的判断**

上面的交互已经基本满足要求了，但是还是会有问题。比如当**文本较少时**，此时是没有发生截断，也就是没有省略号的，但是“展开”按钮却仍然位于右下角，如何隐藏呢？

![2d88305733c70245f3b4a1d17e3bdbaa.png][]

通常 js 的解决方式很容易，比较一下元素的 **scrollHeight** 和 **clientHeight** 即可，然后添加相对应的类名。下面是伪代码

if (el.scrollHeight > el.clientHeight) {
      // 文本超出了
      el.classList.add('trunk')
    }

那么，CSS 如何实现这类判断呢？

可以肯定的是，CSS 是没有这类逻辑判断，大多数我们都需要从别的角度，采用 **“障眼法”**来实现。比如在这个场景，当没有发生截断的时候，表示文本完全可见了，这时，如果在**文本末尾**添加一个元素（红色小方块），为了不影响原有布局，这里设置了绝对定位

.text::after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        background: red;
    }

![b77f9e089eee5110d2776e394fc6bf4b.gif][]

可以看到，这里的红色小方块是完全跟随省略号的。当省略号出现时，红色小方块必定消失，因为已经被挤下去了，这里把父级 **overflow: hidden** 暂时隐藏就能看到是什么原理了

![2ee67b6bd77879b3516de015ebe36c91.gif][]

然后，可以把刚才这个红色的小方块设置一个**足够大的尺寸**，比如 **100% \* 100%**

.text::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: red;
    }

![4651eb73de6c6063dc25419fcb20948c.gif][]

可以看到，红色的块块把右下角的都覆盖了，现在把背景改为白色（和父级同底色），父级 **overflow: hidden** 重新加上

.text::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: #fff;
    }

![a9c27e5f92b1e2bdcbefdf0b52d4ee68.gif][]

现在看看点击展开的效果吧

![0cebd5f968de0f00e17853c03c9ef570.gif][]

现在展开以后，发现按钮不见（被刚才那个伪元素所覆盖，并且也点击不了），如果希望点击以后仍然可见呢？添加一下 **:checked** 状态即可，在展开时隐藏覆盖层

.exp:checked+.text::after{
        visibility: hidden;
    }

这样，就实现了在文字较少的情况下隐藏展开按钮的功能

![c5ad329a4094faef7581d5174274b377.gif][]

最终完整代码可以查看 codepen 多行展开收起自动隐藏\[8\]，兼容版本可以查看 codepen 多行展开收起自动隐藏（全兼容）\[9\]

> 需要注意的是，兼容版本可以支持到 **IE 10+**（这就过分了啊，居然还支持 IE），但是由于 IE 不支持 codepen，所以测试 IE 可以自行复制在本地测试。

#  #

![ee2d6f9d193ff26f37ff1ade547ae5ac.gif][]

一

#  #

**四、总结和说明**

总的来说，重点还是在**布局方面**，交互其实相对容易，整体实现的成本其实是很低的，也没有比较生僻的属性，除了布局方面 **-webkit-box** 貌似有点 bug （毕竟是 **-webkit- 内核**，火狐只是借鉴了过来，难免有些问题），幸运的是可以通过另一种方式实现多行文本截断效果，兼容性相当不错，基本上全兼容（**IE10+**），这里整理一下实现重点：

*  文本环绕效果首先考虑 **浮动 float**
 *  **flex 布局**子元素可以通过百分比计算高度
 *  多行文本截断还可以结合文本环绕效果用 **max-height** 模拟实现
 *  状态切换可以借助 **checkbox**
 *  CSS 改变文本可以采用**伪元素**生成
 *  多利用 CSS 遮挡**“障眼法”**

多行文本展开收起效果可以说是业界一个**老大难**的问题了，有很多 js 解决方案，但是感觉都不是很完美，希望这个全新思路的 CSS 解决方式能给各位带来不一样的启发，感谢阅读，欢迎点赞、收藏、转发～

**References**

*\[1\]* *vue-clamp: https://justineo.github.io/vue-clamp/demo/?lang=zh&fileGuid=XtpJhGpvWxj6qcTr*  
*\[2\]* *css-flexbox: https://www.w3.org/TR/css-flexbox-1/\#algo-stretch?fileGuid=XtpJhGpvWxj6qcTr*  
*\[3\]* *codepen 右下角多行展开环绕效果: https://codepen.io/xboxyan/pen/ExWaBJO?fileGuid=XtpJhGpvWxj6qcTr*  
*\[4\]* *codepen 右下角多行展开环绕效果（全兼容）: https://codepen.io/xboxyan/pen/dyvYNxr?fileGuid=XtpJhGpvWxj6qcTr*  
*\[5\]* *codepen 多行展开收起交互: https://codepen.io/xboxyan/pen/XWMbJeQ?fileGuid=XtpJhGpvWxj6qcTr*  
*\[6\]* *codepen 多行展开收起交互（全兼容）: https://codepen.io/xboxyan/pen/OJpypmR?fileGuid=XtpJhGpvWxj6qcTr*  
*\[7\]* *CSS 奇技淫巧：动态高度过渡动画: https://github.com/chokcoco/iCSS/issues/91?fileGuid=XtpJhGpvWxj6qcTr*  
*\[8\]* *codepen 多行展开收起自动隐藏: https://codepen.io/xboxyan/pen/eYvNvYK?fileGuid=XtpJhGpvWxj6qcTr*  
*\[9\]* *codepen 多行展开收起自动隐藏（全兼容）: https://codepen.io/xboxyan/pen/LYWpWzK?fileGuid=XtpJhGpvWxj6qcTr*

——————— Y · F · E ———————

本文作者：严文彬

[![5f40512bd15138c23dbcd2291369a5fe.png][]][5f40512bd15138c23dbcd2291369a5fe.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![3bf86b4a9cf44c7bb5fef7547e26d983.png][]

[957c4fe0b7853ad43aeb4c4e5f5bacd1.png]: /images/20221020/4a7726549c934cb48c52b934bb494c1b.png
[f42e671dc751958eb52dd758cdfde77c.gif]: /images/20221020/1239cae2972944bd8e64c7541ead23df.png
[87c21298d24fb8b813c4a4f3ddc2c26f.png]: /images/20221020/186c9864b84b4225a129f9d8226e41ad.png
[05d0c81d9bdec8b283bba06461e968bd.png]: /images/20221020/7b8cf61ab89a4bf4bacf6c5e09f87f50.png
[709f9d68bf845015619c0e3d0e9c117a.png]: /images/20221020/5fcb86f64f9a4a64ad574a3d9e3235e1.png
[072a4a4154470ae809a1610441d71b8b.png]: /images/20221020/41f317c1ed1e44c0a3da435e35e86c98.png
[47a7216d349c3c4f1ba0b562209d561b.png]: /images/20221020/42b414e5288344699ce642919384ad50.png
[e67efe2a3b4748a447657654a0691edd.png]: /images/20221020/9ccc85e463384d7ab452346aafcd1062.png
[a6805f974b4e9999b838f0f91715472f.png]: /images/20221020/6757b457e87f4e9295781ca4454c713a.png
[437aaa059334cc5b2822e7f111bdc5da.png]: /images/20221020/f0289f11f6f644ac98a8a80ac61f3b75.png
[07d485d8622afdc4fbed7fc2b7f60f8c.png]: /images/20221020/c99783f530f74dba91c534b99b6fb370.png
[821f467b72292fcf73eaa356daff20d8.png]: /images/20221020/a0d27f1d1cc84083adc09d44e6712a4d.png
[f81a4806dcfee7d8c9977708c094b633.png]: /images/20221020/698df8412d7341b3bd023d9558e433d5.png
[d0b3576fd4c0158565a1895f4869075a.gif]: /images/20221020/6146cd33d7184bfb9403a69dbcf03283.png
[5722b218bdd6e08e01b23176bd659aaa.png]: /images/20221020/7393422c085e4145992c24683c453a64.png
[722509e4a66634f4b7d55b62d36af2d6.png]: /images/20221020/2933ca92e95b49148813c35b709f48f8.png
[52b4be3c0c820179af82e7af1d037d87.gif]: /images/20221020/7f30ed99e4ef402f803a0193643b78a2.png
[fc7ad880bfa0ec890bed0c97671eec47.gif]: /images/20221020/afa69bbb5d7c43d69108d486c104342e.png
[dc850f471916aa51c7b429e31f6a7a55.gif]: /images/20221020/40aa3cd6646a47289444a1ac5603c781.png
[2d88305733c70245f3b4a1d17e3bdbaa.png]: /images/20221020/3641c487bd6c467791a73ce5aadbc21e.png
[b77f9e089eee5110d2776e394fc6bf4b.gif]: /images/20221020/42af207bfff1422c8e5701a33523af60.png
[2ee67b6bd77879b3516de015ebe36c91.gif]: /images/20221020/24cc10971e1f422ea21c9141068981a7.png
[4651eb73de6c6063dc25419fcb20948c.gif]: /images/20221020/4b01d608aade474e85e1abe2423bbc3c.png
[a9c27e5f92b1e2bdcbefdf0b52d4ee68.gif]: /images/20221020/a76bafd5d9724c3b80ddea744c4f45e1.png
[0cebd5f968de0f00e17853c03c9ef570.gif]: /images/20221020/7b52daf27d874d9c8196b8f774034481.png
[c5ad329a4094faef7581d5174274b377.gif]: /images/20221020/676a8e80cc744f0bb1c2227335cf69e0.png
[ee2d6f9d193ff26f37ff1ade547ae5ac.gif]: /images/20221020/8d597b65dc65494687378de0f452530c.png
[5f40512bd15138c23dbcd2291369a5fe.png]: /images/20221020/bc59a67b21924f239b5bf2bbaf9ce528.png
[5f40512bd15138c23dbcd2291369a5fe.png 1]: http://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ%3D%3D&chksm=8891f65ebfe67f48fd731f105053a589e02ddf1fbfa949f5e51ac3004cb531670f1dcfffc585&idx=1&mid=2650596986&scene=21&sn=3e2b70e4a516f313d3dc0a60922eb8e8#wechat_redirect
[3bf86b4a9cf44c7bb5fef7547e26d983.png]: /images/20221020/0c6bc566030a41da85044c7bdc405f26.png