```
<div class="wrap" :class="isEllipsis ? 'warp-hide' : '' ref="wrap"">
<div :class="isEllipsis ? 'text-hide' : ''">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
<div class="hide-text" ref="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
</div>
<div @click="toogle" v-if="showMore">显示更多</div>
```

```
.wrap {
position: relative;
line-height: 20px;
}
.hide-text {
position: absolute;
top: 0;
left: 0;
z-index: -9;
background-color: transparent;
opacity: 0;
}
.warp-hide {
height: 40px;
overflow: hidden;
}
.text-hide {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
```

再写一个存放文本的容器(一直隐藏状态) hide-text，设置为 `absolute`，然后将层级设置为下层。
展示出来的文本利用 `-webkit-line-clamp: 2` 来显示省略号。这时候一开始判断 hide-text 的高度有没有高出 warp 的容器高度来显示`showMore`更多。

```
const h = this.$refs.wrap.offsetHeight
const h2 = this.$refs.text.offsetHeight
this.showMore = h2 > h

toogle () {
this.isEllipsis = !this.isEllipsis
}
```

然后利用`toogle`事件改变`isEllipsis`来添加省略号的 class`warp-hide` 和`text-hide`。

ju zhou di a

@guyeu 但我觉得引入工具库又额外增加成本了。。
@kiracyan 但是后台传过来的数据总还是需要进行处理，可能没有我例子那么多罢了
@rain0002009 就是字符串。。。
@KuroNekoFan 其实根本的解决方法的确是这样的，只是就目前来看是不可能了，所以就想看看有没有什么好一点的写法
@lihongjie0209 谢谢指点！

就这样来说吧，用拼音的话你就只想着国人用了

@mainjzb 完美～

看到喜马拉雅 app 我就想小声逼逼一下我所有东西都禁止掉了（通知，自启动，权限之类的），然后退出清理后台，结果在运行程序里面还是会有，最后我就把它删了 - -!

学习一下

我觉得我可以

分子

看到最后一句话我就想知道油费用了多少#doge

能关门的书房#doge