请问一个超出行数出现省略号并且显示更多功能的问题

[zzlit]

就比如目前是超出两行出现省略号，那么就有三种情况：

1. 只有一行。
2. 有两行但是没有出现省略号。
3. 有两行并且出现了省略号，就有显示更多的功能。

目前我是根据 divHeight/line-height 来判断是否到达了两行，但是无法判断 2.3 种情况，因为数字字母和符号的宽度和文字不一样。

又找到一个这样的纯 CSS 实现多行文字截断，但是也还是不知道怎么判断第二行是否出现了省略号。

请大佬们给一个思路！

[snarkprayer]

line-clamp

[KuroNekoFan]

按字符数算
或者用 canvas 的 measureText 来算一下句子占的宽度

[zzlit]

```
<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`。