const isOverflow = (element) => {
    return element ? element[0].clientWidth >= element[0].scrollWidth : false;
}

</aside>

Untitled

最终完整代码

兼容版本

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

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

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

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

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

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

1. 多行文本截断

假设有这样一个 html 结构

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

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

.text {
  display: -webkit-box; /* 重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
  -webkit-line-clamp: 3;
  overflow: hidden;
}

2. 右下角环绕效果

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