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

时间  2021-08-12
标签 javascript css html 前端 vue java git github web 浏览器 栏目 CSS 繁體版
原文   原文链接

本文做者：严文彬javascript

原创声明：本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联系公众号 (id: yuewen_YFE) 获取受权，并注明做者、出处和连接。css

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

展开3 (1).gif 实现这一类布局和交互难点主要有如下几点前端

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

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

1、位于右下角的“展开收起”按钮

不少设计同窗都喜欢这样的设计，把按钮放在右下角，和文本 混合 在一块儿，而不是单独一行，视觉上可能更加温馨美观。先看看多行文本截断吧，这个比较简单java

1. 多行文本截断

假设有这样一个 html 结构git

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

多行文本超出省略你们应该很熟悉这个了吧，主要用到用到 line-clamp，关键样式以下github

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

image.png

2. 右下角环绕效果

提到 文本环绕效果，通常能想到 浮动 float，没错，千万不要觉得浮动已是过去式了，具体的场景仍是颇有用的。好比下面放一个按钮，而后设置浮动web

<div class="text">
  <button class="btn">展开</button>
  浮动元素是如何定位的
正如咱们前面提到的那样，当一个元素浮动以后，它会被移出正常的文档流，而后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另一个浮动的元素。
</div>
复制代码
.btn {
  float: left;
  /*其余装饰样式*/
}
复制代码

image.png 若是设置右浮动浏览器

.btn {
  float: right;
  /*其余装饰样式*/
}
复制代码

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

.btn {
  float: right;
  margin-top: 50px;
  /*其余装饰样式*/
}
复制代码

image.png

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

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

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

image.png

如今按钮到了伪元素的左侧，如何移到下面呢？很简单，清除一下浮动 clear: both; 就能够了

.btn {
  float: right;
  clear: both;
  /*其余装饰样式*/
}
复制代码

image.png

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

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

image.png

3. 动态高度

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

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

image.png

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

image.png

缘由其实很容易想到，就是高度 100% 失效的问题，关于这类问题网上的分析有不少，一般的解决方式是给父级指定一个高度，可是这里的高度是动态变化的，并且还有展开状态，高度更是不可预知，因此设置高度不可取。

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

If the flex item hasalign-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 一样有效，原理相似

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

image.png

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

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

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

4.其余浏览器的兼容处理

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

image.png

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

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

image.png

那么问题来了：没有 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;
}
...
复制代码
<!--3行-->
<div class="text" line-clamp="3">
...
</div>
<!--5行-->
<div class="text" line-clamp="5">
 ...
</div>
复制代码

image.png

能够看到基本上正常了，除了没有省略号，如今加上省略号吧，跟在展开按钮以前就能够了，能够用伪元素实现

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

image.png

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

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

提到 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;
}
复制代码

展开2.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; /*在展开状态下隐藏省略号*/
}
复制代码

展开3.gif

基本和本文开头的效果一致了，完整代码能够查看 codepen 多行展开收起交互，兼容版本能够查看 codepen 多行展开收起交互（全兼容）

还有一点，若是给max-height设置一个合适的值，注意，是合适的值，具体原理能够参考 CSS 奇技淫巧：动态高度过渡动画，还能加上过渡动画

.text{
  transition: .3s max-height;
}
.exp:checked+.text{
  max-height: 200px; /*超出最大行高度就能够了*/
}
复制代码

Kapture 2021-05-11 at 14.21.55.gif

3、文本行数的判断

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

image.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;
}
复制代码

展开4.gif 能够看到，这里的红色小方块是彻底跟随省略号的。当省略号出现时，红色小方块一定消失，由于已经被挤下去了，这里把父级 overflow: hidden 暂时隐藏就能看到是什么原理了

展开5.gif

而后，能够把刚才这个红色的小方块设置一个足够大的尺寸，好比 100% * 100%

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

9202761e575d8627136547a61fc60edc.gif

能够看到，红色的块块把右下角的都覆盖了，如今把背景改成白色（和父级同底色），父级 overflow: hidden从新加上

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

展开7.gif 如今看看点击展开的效果吧

展开8.gif

如今展开之后，发现按钮不见（被刚才那个伪元素所覆盖，而且也点击不了），若是但愿点击之后仍然可见呢？添加一下 :checked 状态便可，在展开时隐藏覆盖层

.exp:checked+.text::after{
    visibility: hidden;
}
复制代码

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

展开9.gif

最终完整代码能够查看codepen 多行展开收起自动隐藏，兼容版本能够查看codepen 多行展开收起自动隐藏（全兼容）

须要注意的是，兼容版本能够支持到 IE 10+（这就过度了啊，竟然还支持 IE），可是因为 IE 不支持 codepen，因此测试 IE 能够自行复制在本地测试。

cc602bca-3538-466e-8dce-ee630ddd2635.gif

4、总结和说明

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

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程