关于css:CSS-实现多行文本展开收起

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

实现这一类布局和交互难点次要有以下几点

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

说实话，之前独自看这个布局，即便借助 JavaScript 也不是一件容易的事啊（须要计算文字宽度动静截取文本，vue-clamp 就是这么做的），更别说上面的交互和判断逻辑了，不过通过我的一番推敲，其实纯 CSS 也能完满实现的，上面就一步一步来看看如何实现吧~

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

多行文本截断

假如有这样一个 html 构造

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

多行文本超出省略大家应该很相熟这个了吧，次要用到用到line-clamp，要害款式如下

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

右下角盘绕成果

提到 文本盘绕成果 ，个别能想到 浮动 float，没错，千万不要认为浮动曾经是过来式了，具体的场景还是很有用的。比方上面放一个按钮，而后设置浮动

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

.btn {
  float: left;
  /* 其余装璜款式 */
}

如果设置右浮动

.btn {
  float: right;
  /* 其余装璜款式 */
}

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

.btn {
  float: right;
  margin-top: 50px;
  /* 其余装璜款式 */
}

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

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

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

当初按钮到了伪元素的左侧，如何移到上面呢？很简略，革除一下浮动 clear: both; 就能够了

.btn {
  float: right;
  clear: both;
  /* 其余装璜款式 */
}

能够看到，当初文本是齐全盘绕在右侧的两个浮动元素了，只有把红色背景的伪元素宽度设置为 0（或者不设置宽度，默认就是 0），就实现了右下角盘绕的成果

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

动静高度

下面尽管实现了右下加盘绕，然而高度是固定的，如何动静设置呢？这里能够用到 calc 计算，用整个容器高度减去按钮的高度即可，如下

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

很惋惜，如同并没有什么成果，关上控制台看看，后果发现 calc(100% – 24px) 计算高度为 0

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

除此之外，其实还有另一种形式，那就是利用 flex 布局。大略的办法就是在flex 布局 的子项中，能够通过百分比来计算变动高度，具体可参考 w3.org 中对于 css-flexbox 的形容

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 同样无效，原理相似

这样下来，方才的计算高度就失效了，扭转文本的行数，同样位于右下角~

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

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

到这里，右下角盘绕的成果就根本实现，省略号也是位于开展按钮之前的，残缺代码能够查看 codepen 右下角多行开展盘绕成果

下面的实现是最完满的解决形式。本来认为兼容性没什么大问题的，毕竟只用到了文本截断和浮动，-webkit-line-clamp尽管是 -webkit- 前缀，不过 firefox 也是反对的，关上一看傻了眼，safari和 firefox 竟然全乱了！

这就有点好受了，后面那么多致力都徒劳了吗？不可能不论这两个，不然就只能是 demo 了，无奈用于生产环境。

连忙关上控制台看看是什么起因。一番查找，后果发现是display: -webkit-box！设置该属性后，本来的文本如同变成了一整块，浮动元素也无奈产生盘绕成果，去掉之后浮动就失常了

那么问题来了：没有 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>

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

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

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

提到 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;}

这里还有一个小问题，“开展”按钮在点击后应该变成“收起”，如何批改呢？

有一个技巧，但凡碰到须要动静批改内容的，都能够应用伪类 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; /* 在开展状态下暗藏省略号 */}

根本和本文结尾的成果统一了，残缺代码能够查看 codepen 多行开展收起交互，兼容版本能够查看 codepen 多行开展收起交互（全兼容）

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

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

下面的交互曾经根本满足要求了，然而还是会有问题。比方 当文本较少时，此时是没有产生截断，也就是没有省略号的，然而“开展”按钮却依然位于右下角，如何暗藏呢？

通常 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;
}

能够看到，这里的红色小方块是齐全追随省略号的。当省略号呈现时，红色小方块必然隐没，因为曾经被挤下去了 ，这里把父级overflow: hidden 临时暗藏就能看到是什么原理了

而后，能够把方才这个红色的小方块设置一个 足够大的尺寸，并且升高透明度，比方100% * 100%

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

能够看到，红色的块块把右下角的都笼罩了，当初把背景改为红色（和父级同底色），父级 overflow: hidden 从新加上

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

当初看看点击开展的成果吧

当初开展当前，发现按钮不见（被方才那个伪元素所笼罩，并且也点击不了），如果心愿点击当前依然可见呢？增加一下 :checked 状态即可，在开展时暗藏覆盖层

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

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

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

须要留神的是，兼容版本能够反对到IE 10+（这就过分了啊，竟然还反对 IE），然而因为 IE 不反对 codepen，所以测试 IE 能够自行复制在本地测试。

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

文本盘绕成果首先思考 浮动 float
flex 布局 子元素能够通过百分比计算高度
多行文本截断还能够联合文本盘绕成果用 max-height 模仿实现
状态切换能够借助 checkbox
CSS 扭转文本能够采纳伪元素生成
多利用 CSS 遮挡“障眼法”

多行文本开展收起成果能够说是业界一个老大难的问题了，有很多 js 解决方案，然而感觉都不是很完满，心愿这个全新思路的 CSS 解决形式能给各位带来不一样的启发，感激浏览，欢送点赞、珍藏、转发～

关于css:CSS-实现多行文本展开收起

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

4. 其余浏览器的兼容解决

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

三、文本行数的判断

四、总结和阐明

Just My Socks（注册教程内含优惠码）

关于css:CSS-实现多行文本展开收起

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

4. 其余浏览器的兼容解决

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

三、文本行数的判断

四、总结和阐明

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）