html 文字折叠行 展开,CSS 实现多行文本“展开收起”

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

实现这一类布局和交互难点主要有以下几点位于多行文本右下角的“展开收起”按钮

“展开”和“收起”两种状态的切换

当文本不超过指定行数时，不显示“展开收起”按钮

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

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

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

假设有这样一个 html 结构

浮动元素是如何定位的

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

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

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

}

右下角环绕效果

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

展开

浮动元素是如何定位的

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

.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

}