超出两行展示省略号和展开收起提示

首先要给元素设置超出显示省略号的样式，如果文字超出了，此获取dom，元素的scrollHeight会大于offsetHeight。点击展开时，将元素的display添加样式display: block;text-overflow: initial;

<template>
  <div ref="desc" class="hospital-detail-info-desc" :class="{ more: zk }">
    <span>XXXX：</span>
    {{ isOver && !zk ? descText.slice(0, 149) + '...' : descText }}
    <span class="btn">
      <span v-if="isOver" class="zk" @click="zk = !zk">
        <span class="zk" v-show="!zk">展开</span>
        <span class="zk" v-show="zk">收起</span>
      </span>
    </span>
  </div>
</template>
<script setup>
import { reactive, getCurrentInstance, toRefs, onMounted, nextTick } from 'vue'
const isOver = ref(false)
const zk = ref(false)
const desc = ref(null)
const descText = ref(
  '.....................'
)
onMounted(async () => {
  await nextTick()
  if (desc.value.scrollHeight > desc.value.offsetHeight) {
    isOver.value = true
  }
  console.log(isOver.value)
})
</script>
<style lang="scss" scoped>
.hospital-detail-info-desc {
  margin-top: 16px;
  color: #172b4d;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  span {
    color: #6b778c;
  }
  .zk {
    color: #0647a6;
  }
}
.more {
  display: block;
  text-overflow: initial;
}
</style>
```