需求：文本超出4行以后，顯示展開--收起按鈕。例子中使用的v-html
效果：
1、默認(rèn)顯示樣式

image.png

2、點(diǎn)擊展開后效果

image.png

vue文件實(shí)現(xiàn)代碼

export default({
  data(){
    return {
      infoScrollHeit: 0, //文本區(qū)域包含滾動(dòng)條高度
      infoClientHeit: 0, //文本區(qū)域不包含滾動(dòng)條高度
    },
    mounted(){
      this.infoScrollHeit = this.$refs.info.scrollHeight
      this.infoClientHeit = this.$refs.info.clientHeight
      // 一下代碼可以將文本還原為：默認(rèn)顯示狀態(tài)
      // if(this.$refs.exp2.checked) {
          // this. infoClientHeit =  80 //4行文本的高度為80px
          // this.$refs.exp2.checked = false
       //}
    }
  }
})
<div class="wrapper">
  <input id="exp2" ref="exp2"  class="exp"  type="checkbox">
  <div class="text">
    <label v-if="infoScrollHeit > infoClientHeit" class="btn" for="exp2"></label>
    <div ref='info' v-html="info"></div>
   </div>
</div>

css文件實(shí)現(xiàn)代碼

.wrapper {
  padding: 8px;
  background: #FEF8E7;
  border-radius: 2px;
  display: flex;
  overflow: hidden;
}
.text {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: #FF9505;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  position: relative;
  width: 100%;
}
.text::before {
  content: '';
  height: calc(100% - 20px);
  float: right;
}
.text::after {
  content: '';
  width: 999vw;
  height: 999vw;
  position: absolute;
  box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #FEF8E7;
  margin-left: -100px;
}
.btn{
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: #2B6DE5;
  float: right;
  clear: both;
  cursor: pointer;
  /* margin-top: -30px; */
}
.btn::before{
  content:'展開'
}
.exp{
  display: none;
}
.exp:checked+.text{
  -webkit-line-clamp: 999;
    transition: all .3s ease-in-out;

}
.exp:checked+.text::after{
  visibility: hidden;
}
.exp:checked+.text .btn::before{
  content:'收起'
}

借用復(fù)選框的功能實(shí)現(xiàn)，點(diǎn)擊展開+收起的功能。scrollHeight > clientHeight說明文本溢出

以下代碼可以將展開的文本還原為：默認(rèn)顯示狀態(tài)

  if(this.$refs.exp2.checked) {
    this. infoClientHeit =  80 //4行文本的高度為80px
    this.$refs.exp2.checked = false
  }

image.png

image.png