效果圖如下：

初始化展示兩行，超出顯示省略號，點擊查看全部，展示全部內容，點擊收起，恢復初始化狀態兩行

知識點：

1. 展示兩行，用的css屬性：? ? display:?-webkit-box;???-webkit-box-orient:?vertical;? ? ?-webkit-line-clamp:?2;
2. 利用clientHeight和scrollHeight的特性比較，來判斷內容是否溢出

摘自：https://blog.csdn.net/qq_35430000/article/details/80277587

以下是全部代碼：

我將其封裝成一個組件，這是組件的內容

<template>
  <div>
    <div class="question-des" ref="questionDes" v-if="!showMore">
      {{ des }}
    </div>
    <div class="switchBtn" v-if="hasMore" @click="switchFn(1)">查看全部</div>
    <div class="question-des_more" v-if="showMore">{{ des }}</div>
    <div class="switchBtn" v-if="!hasMore && showMore" @click="switchFn(0)">
      收起
    </div>
  </div>
</template>
<script>
export default {
  props: ['des'],
  data () {
    return {
      hasMore: false,
      showMore: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.hasMore = this.$refs.questionDes.clientHeight < this.$refs.questionDes.scrollHeight
    })
  },
  methods: {
    switchFn (type) {
      if (type) {
        this.showMore = true
        this.hasMore = false
      } else {
        this.showMore = false
        this.hasMore = true
      }
    }
  }
}
</script>
<style>
.question-des {
  font-size: 12px;
  padding: 5px 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: wrap;
  color: textLightGrey;
}

.question-des_more {
  padding: 5px 10px;
  color: textLightGrey;
  font-size: 12px;
}

.switchBtn {
  font-size: 12px;
  color: #5fbefe;
  text-align: right;
  margin-top: -8px;
  margin-bottom: 6px;
}
</style>

引用方法如下：