vue中内容超过三行省略并显示展开和关闭，不超过三行不显示

1. 第一步：多行省略，并显示和关闭
   html部分：

 
"content">
        "checkbox" id="exp" />
        
"text">
            "btn" for="exp">
            
 浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
                
            
        

    

css部分：

      .btn {
            float: right;
            clear: both;
            margin-right: 8px;
            color: dodgerblue;
        }
        .text::before{
            content: '';
            float: right;
            margin-bottom: -18px;
            height: 100%;
            cursor: pointer;
        }
        .content {
            display: flex;
        }
        .text {
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        #exp {
            visibility: hidden;
        }
        #exp:checked+.text{
            -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
        }
        .btn::after{
            content:'展开'
        }
        #exp:checked+.text .btn::after{
            content:'收起'
        }

此时已经实现了第一步，但是我们会发现，即便文字只有一行，展开和关闭也会显示，这就不对了，所以我们要根据文字的行数来判断展开和关闭按钮的显示和隐藏

1. 第二步：根据文字的行数来判断展开和关闭按钮的显示和隐藏
   逻辑是：
   1.获得三行文字的高度
   2.获得全部文本的高度
   3.若(三行文字的高度>全部文本的高度)，那么证明文本不超过三行，即不需要显示展开和关闭。
   4.若(三行文字的高度<全部文本的高度)，那么证明文本超过三行，即需要超出三行省略并显示展开和关闭。
   在通常的业务场景中，文本数据都是后台返回的，所以要在合适的时机才能获得文本的正确高度 。

    
    

    
占位
      
        {{courseDetail.courseTeacherSummary}}
    

获得三行文本的高度：一行的高度*3，一行的高度可以通过占位的这个元素获得，获得数据后如果后续不改文本的样式就可以删掉了，留着影响布局。

 // 获取一行文字的height 计算当前文字比较列表文字
        let oneHeight = this.$refs.more.scrollHeight
        let twoHeight = oneHeight * 3 || 99

获取文本的高度并比较：

watch:{
courseDetail(){
   this.$nextTick(()=>{
     let oneHeight = this.$refs.more.scrollHeight
     let threeHeight = oneHeight * 3 || 99
     let h = document.querySelector('#textContainer').scrollHeight;
    if(h>threeHeight){
    //展开和关闭按钮的显示和隐藏
        this.isShowZK = true;
    }
    else{
        this.isShowZK = false;
    }
})
}

全部代码：

//html部分
              

                
                

                  
                    {{courseDetail.courseTeacherSummary}}
                
              
              
// data里面：
				data() {
				  return {
				    isShowZK:false,
				    courseDetail：{},//返回的数据
				  }
				},
//watch里面：
watch:{
courseDetail(){
   this.$nextTick(()=>{
     let oneHeight = this.$refs.more.scrollHeight
     let threeHeight = oneHeight * 3 || 99
     let h = document.querySelector('#textContainer').scrollHeight;
    if(h>threeHeight){
    //展开和关闭按钮的显示和隐藏
        this.isShowZK = true;
    }
    else{
        this.isShowZK = false;
    }
})
}

图中老师简介少于3行所以没有展开和隐藏，课程简介大于3行，显示展开和隐藏。最后又路过的大佬可以跟我科普一下为啥下面这样写获得不了真正的文本高度，我看好多文章里面推荐的这种写法

   mounted() {
      // DOM 加载完执行
      this.$nextTick(() => {
      //计算文字高度的函数
        this.calculateText()
      })