前期准备:根据字体大小和行数确定这个块整体的高度

template

<div class="desc" ref="desc">{{desc}}</div>
<button v-show="showButton">显示更多</button>

script

 //获取高度是否超过4行判断是否展示查看更多按钮
    getShowMore(){
    const height = this.$refs.desc? this.$refs.desc.clientHeight : 0; //根据元素的clientheight来判断
      if(height > 80){
        this.showButton = true
      }
      else {
        this.showButton = false
      }
    }

style

.desc{
font-size:14px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-climp:4;
overflow:hidden;
}
Logo

前往低代码交流专区

更多推荐