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

[zzlit]

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

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

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

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

请大佬们给一个思路！

想到了一个方法可以自适应高度，是按照-webkit-line-clamp实现的，利用css截断的例子，我就按照vue来写了：

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

.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的容器高度。

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

利用isEllipsis来添加省略号的classwarp-hide 和text-hide。

这里我也不太清楚那个一直隐藏的状态会不会对文档流有什么影响，或者什么未知的bug，但是这样是可以动态的设置高度的，请大佬指点一下。

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