vue 超出多行，省略，展示显示更多按钮_vue文字超过四行...显示更多,点击更多展示全部内容

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

template

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

script

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

style

.desc{
font-size:14px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-climp:4;
overflow:hidden;
}
1
2
3
4
5
6
7