vue实现文字超出3行时，后面显示省略号和更多

<template>
<ul>
    <li v-for=(item,index) in schoolselegantList :key="index">
       <div class="dp-text-ellipsis-wrapper">
           <div class="text" :style="textStyleObject" ref="text">
               <label class="btn" @click="gotoIntro">更多</label>
               {{item.title}}
           </div>
        </div>   
    </li>
</ul>
</template>
<script>
export default {
 return {
      lineClamp: 3,
schoolselegantList: [
        {
          imageurl: '../../../../public/top/image/group_icon.png',
          schoolNmae: '深圳高级中学',
          children: [
            {
              num: 20,
              name1: '直播'
            }, {
              num: 20,
              name1: '专题课程'
            }, {
              num: 20,
              name1: '微课'
            }, {
              num: 20,
              name1: '文档'
            }
          ],
          title: '在钱塘开茶铺的赵盼儿（刘亦菲 饰）惊闻未婚夫、新科探花欧阳旭（徐海乔 饰）要另娶当朝高官之女，不甘命运的她誓要上京讨个公道。在途中她遇到了出自权门但生性正直的皇城司指挥顾千帆（陈晓 饰），并卷入江南一场大案，两人不打不相识从而结缘。赵盼儿凭借智慧解救了被骗婚而惨遭虐待的“江南第一琵琶高手”宋引章（林允 饰）与被苛刻家人逼得离家出走的豪爽厨娘孙三娘（柳岩 饰），三位姐妹从此结伴同行，终抵汴京，见识世间繁华。'
        }
      ],
    },
     computed: {
        textStyleObject () {
          return {
            'max-height': `${2 * this.lineClamp}em `
        }
    }
    }  
}
</script>
<style>
.dp-text-ellipsis-wrapper {
	display: flex;
	margin: 6px 0 20px 0;
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
}
.text {
	position: relative;
	overflow: hidden;
	line-height: 2.1;
	line-height: 30px;
	text-align: justify;
	text-overflow: ellipsis;
	word-break: break-all;
  }
  .text::before {
	float: right;
	height: calc(100% - 20px);
	content: '';
  }
  .btn {
	position: relative;
	float: right;
	clear: both;
	margin-left: 10px;
	font-size: 14px;
	padding: 0 8px;
	color: #206ef7;
	line-height: 20px;
	border-radius: 4px;
	cursor: pointer;
	z-index: 10;
  }

  .btn::before {
	position: absolute;
	left: 1px;
	color: #333;
	transform: translateX(-100%);
	content: '...';
  }
</style>

实现效果如下