html文本向右下移动

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

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

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

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

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

1. 多行文本截断

假设有这样一个 html 结构

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

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

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

2. 右下角环绕效果

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

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

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

如果设置右浮动

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