显示前半内容后半内容用省略号_文章展开与折叠，并且文字折叠是半透明，并且最多显示2行，多余的省略号省略...

1.思路，半透明是2个div，第一个div半透明定位到第二个div上，

盘点是否有省略号

:class="[this.showEllipsis==-1?'news_content_bottom_ellipsis':'']"

文章内容

{ {showText}}

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;