就比如目前是超出两行出现省略号，那么就有三种情况：
- 只有一行。
- 有两行但是没有出现省略号。
- 有两行并且出现了省略号，就有显示更多的功能。
目前我是根据 divHeight/line-height 来判断是否到达了两行，但是无法判断 2.3 种情况，因为数字字母和符号的宽度和文字不一样。
又找到一个这样的纯 CSS 实现多行文字截断，但是也还是不知道怎么判断第二行是否出现了省略号。
请大佬们给一个思路！
line-clamp
按字符数算
或者用 canvas 的 measureText 来算一下句子占的宽度
```
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.
显示更多
```
```
.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`。