CSS实现文案最后渐变消失

前言
 

 

我前面的文章写过一个关于《紧随文案最后的展开收起》里面就涉及到了文案最后使用...结束的演示，但是很多时候我们还会遇到一些奇怪的文案省略样式，例如：

上面这个demo就是需要实现文案最后渐变消失
 

一、使用遮罩
 

简单来说就是在文案盒子的最后使用一个渐变的盒子去遮挡
 

<p class="text">
人生路上，我们时常需要一些励志人生的励志短文伴随我们一路前行。以下是学习啦小编为你整理的励志人生的励志短文，欢迎大家阅读。励志人生的励志短文篇一：如何坚持不懈做一件事情同一起跑线做同一件事情，到最后还是有很多人被别人远远甩在背后，原因不是他不够聪明或者勤劳，却是因为他不够坚持。“坚持就是胜利”说的就是这个道理。做一件事如何坚持下去，是很多人都在寻找答案的问题。是很多人都在寻找答案
 <span class="model">查看全文...</span>            
</p>

.text{
    position: relative;
    line-height: 40px;
}
.model{
    display: inline-block;
    width: 100%;
    height: 40px;
    padding-right: 20px;
    background: linear-gradient(90deg, transparent 0%, red 40%);
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 22px;
    font-weight: 700;
    text-align: right;
    z-index: 2;
}

二、使用伪类

.text{
    position: relative;
    line-height: 40px;
}
.text::after{
    content: '查看全文...';
    display: inline-block;
    width: 100%;
    height: 40px;
    padding-right: 20px;
    background: linear-gradient(90deg, transparent 20%, red 60%);
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 22px;
    font-weight: 700;
    text-align: right;
    z-index: 2;
}

三、遮罩mask

我们上面说的两种方法其实都是很基础的，因为我们都知道只要在文案的最后面用上遮罩就可以，然后颜色只要和背景色保持一致就ok了,但是如果文案的背景是图片怎么办，那么遮罩的渐变色就没法与背景完美融合了

 如上所示，所以我们需要用到下面我们说的属性

Css 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。简言之，我们可以通过在元素上设置这个属性，来隐藏该元素的一部分。

.text{
    position: relative;
    line-height: 40px;
    -webkit-mask: linear-gradient(270deg, transparent 20%, white 100%);
}

所以我们只需要把盒子最下面的一行进行处理就可以
 

.text{
    -webkit-mask:linear-gradient(270deg, transparent, transparent 30%, #000),
	linear-gradient(270deg, #000, #000);
	-webkit-mask-size: 100% 66px, 100% calc(100% - 46px); //减去的是最后一行的高度
	-webkit-mask-position: bottom, top;
	-webkit-mask-repeat: no-repeat;
}

 这样我们就不需要顾虑遮挡的问题，后续把提示文案定位上去就可以了