vue的h5文本超出两行显示省略号并显示'更多'按钮

html

<div ref="brief" class="ellipsis" :class="{ more2: !isOpenJ }">
            <span style="font-size: 0.34rem">{{ playObj.courseDetailed }}</span>
          </div>
          <div v-if="isShowMore">
            <div class="more" @click="isOpenJ = !isOpenJ">{{ isOpenJ ? '更多' : '收起' }}<van-icon v-if="isOpenJ" name="arrow-down" /><van-icon v-else name="arrow-up" /></div>
          </div>

js

saync fun(){
    const res = await getList()
    if(errorCode===0){
        this.$nextTick(() => {
            const scrollHeight = this.$refs.brief.scrollHeight
            const offsetHeight = this.$refs.brief.offsetHeight
            this.isShowMore = scrollHeight > offsetHeight ? true : false
            console.log('当前占用元素', this.isShowMore)
        })
    }
}

css

.ellipsis {
  position: relative;
  // padding-right: 3px;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  &.more2 {
    display: block;
    text-overflow: initial;
  }
}

超出两行显示更多按钮点击动态添加class样式

没有超过两行不显示按钮