文章展开与折叠，并且文字折叠是半透明，并且最多显示2行，多余的省

1.思路，半透明是2个div，第一个div半透明定位到第二个div上，
盘点是否有省略号
:class="[this.showEllipsis==-1?'news_content_bottom_ellipsis':'']"

<div class="goodContent">
        <div class="newsBg"></div>
        <div class="news_content_bottom" id="news_content_bottom" :style="{height: scrollerHeight}" :class="[this.showEllipsis==-1?'news_content_bottom_ellipsis':'']">
         文章内容
        </div>
        <p class="buttonAll" @click.stop.prevent="onShow" >{{showText}}
          <em class="downArrow" v-if="showText=='展开全文'"></em>
          <em class="upArrow" v-else></em>
        </p>
      </div>

2.样式

//透明div
 .newsBg{
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%);
        height:36px;
        width: 100%;
        position: absolute;
        z-index: 10;
        top:19px;
 }
//内容div
.news_content_bottom{
        margin-top:12px;
        font-size:14px;
        color: #303133FF;
        overflow: hidden;    /* 隐藏溢出内容 */
        height:42px;
        line-height: 22px;
        .buttonAll{
          margin-top:12px;
          font-size:14px;
          color: #303133FF;
        }
        .el-button{
          font-size: 16px;
          color: #333;
        }
        p{
          padding:5px 0;
        }
      }
//省略号的css
 .news_content_bottom_ellipsis{
        margin-top:12px;
        font-size:14px;
        color: #303133FF;
        overflow: hidden;    /* 隐藏溢出内容 */
        text-overflow: clip;    /* 修剪文本 */
        display: -webkit-box;    /* 弹性布局 */
        -webkit-box-orient: vertical;    /* 从上向下垂直排列子元素 */
        -webkit-line-clamp: 2;    /* 限制文本仅显示前三行 */
      }

3.js 展开与折叠，折叠的时候加上透明度class，展开去掉透明度class，并且固定2行文章的高度为42px

 data(){
      return {
        charityDetailData:{},
        scrollerHeight:'',
        isHide:false,
        showText:'展开全文',
         showEllipsis:-1,//判断是否有省略号
        newsDetail: {
        }
      }
    },
 methods:{
 //慈善捐赠展开，收起
      onShow(){
          this.isHide=!this.isHide;
          let contentH=document.getElementById("news_content_bottom");
          let newsBg=document.querySelector(".newsBg");
          let scrollTop = document.getElementById("news_content_bottom").offsetHeight;
        if(scrollTop<=42){
              contentH.style.overflow = 'hidden';
              this.scrollerHeight = 'auto';
              newsBg.style.display='none';
              this.showText='收起'
              this.showEllipsis='';
       }else {
              contentH.style.overflow = 'auto';
              this.scrollerHeight = '42px';
              this.showText='展开全文';
              newsBg.style.display='block';
              this.showEllipsis=-1;
      }
      },
}

4.最终的效果

image.png

外加一个渐变

            background: linear-gradient(90deg, #FFFFFF 0%, #FFEACB 100%);

效果

image.png