实现查看更多功能 -记录一下可复用

<div :class="[{'box': item.handleText.length > 200 && expandFlag != index }, 'words']" :content="item.handleText">
   {{item.handleText}}
   <span class="btn" @click="expandFlag = index" v-if="item.handleText.length > 200 && expandFlag != index">查看更多</span>
   <span class="btn" @click="expandFlag = -1" v-else-if="item.handleText.length > 200">收起</span>
</div>

利用content 把上面三行内容覆盖拼接

.words{
   position: relative;
   left:0;
   width: 100%;
   line-height: 20px;
 }
 .box{
   max-height:80px;
   color: #fff;
 }
 .box::before, .box::after{
   content: attr(content);
   overflow: hidden;
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   color: #666;
   line-height: 20px;
 }
 .box::before{
   max-height: 60px;
   z-index: 2;
   background: #fff;
 }
 .box::after{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-line-clamp: 4;
   text-indent: -5em;
   padding-right: 5em;
 }
 .words .btn{
   position: absolute;
   right: 8px;
   bottom: -1px;
   z-index: 3;
   color: #1471fc;
   line-height: 20px;
   &:hover{
     cursor: pointer;
   }
 }

标签：box,index,查看,复用,height,content,webkit,多功能,line
来源： https://blog.csdn.net/weixin_39308542/article/details/117514833