vue实现文字超出3行时，后面显示省略号 查看更多跳转详情

标签：vue 省略号 text height 跳转 line font 20px

 

 

 

<div class="dp-text-ellipsis-wrapper">        <div class="text" :style="textStyleObject" ref="text">               <label class="btn" @click="practClick">查看更多 >></label>                <span v-html="projectDescription"></span>          </div>   </div>

<script>
export default {

data(){

      return {
         lineClamp: 3,
        projectDescription: ' ',   // 后台数据
        }
},

created:{

    // 查看更多 路由跳转

     gotoIntro(){

   // 路由地址

   this.$router.push({         path: "/viewMoreIndex",       });

}

},

computed: {
    textStyleObject () {
          return {
              'max-height': `${2 * this.lineClamp}em `
          }
    }
}
}
</script>

<style  scoped lang="scss">

.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;   font-size: 14px;
  /* 设置多行文本溢出省略 */   display: -webkit-box;   /* 默认最多显示3行 */   -webkit-line-clamp: 3;   overflow: hidden;   -webkit-box-orient: vertical; } .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>

版权声明：本文为CSDN博主「一个正在向大佬迈进的前端小白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_70613396/article/details/126269898

标签：vue,省略号,text,height,跳转,line,font,20px
From： https://www.cnblogs.com/smile-guo/p/17227695.html