使用CSS实现“文段尾行渐变消失”

Jou

发布于 2022-08-10 20:59:22

1.5K0

文章被收录于专栏：前端技术归纳前端技术归纳

导语文章来源于最近解决的一个需求，让一段文案的尾行渐变消失，解决的时候了解到了很多新的知识点，所以记录下来。

问题描述

最近在做H5的页面的时候，遇到了这样的一个需求：

在一个展示信息的页面，为了提升用户体验，希望在展示一个文段信息的时，只展示指定行数，将超出行数隐藏，并且如果有超出的行数，则展示文段的尾行渐变消失，并加上一个扩展按钮，提醒用户有未展示完整的信息。

说起来比较绕，大概就是这样一个效果

使用遮罩

第一眼看起来还是比较好处理，因为文段消失的感觉，就有点像一个遮罩蒙层，所以我第一反应也是，使用一个遮罩层来处理。

具体处理方式就是，在右下角放一个div，设置和背景相同的颜色，并且设置成左往右的渐变消失，盖住文字就可以，于是就有了这样的效果。

这里的expand下面盖住的是一块渐变的盒子

.mask {
        width:500px;
        height: 36px;
        position: absolute;
        background: linear-gradient(90deg, transparent 10%, rgba(84, 105, 136) 70%);
        right: 0;
        bottom: 107px;
        font-size: 22px;
        font-weight: 700;
        z-index: 332;
}

看起来好像比较完美的实现了，但是有个问题，渐变盒子之所以能完美覆盖最后一行文段，是因为它的颜色和背景完全相同，如果背景是渐变的，或者是一张图片，就会有问题，比如像这样。

这里我其实还想过，既然背景不能融合会导致渐变盒子浮出文段，那么我可以直接在文段对应位置切出一块能融合的背景，或者说设置对应的渐变色，这样就能够解决浮层。

但是产品告诉我，父级渐变背景是有滚动条的，所以文段的背景色还会改变，所以不能写死这块的颜色，还是需要对应的获取。

行内元素的渐变背景

我们在给行内元素设置背景时，它不会像块级元素一样，直接获取到背景，行内元素获取背景，是默认先让整个DOM不换行，获取到背景色之后，再默认换行，所以如果对其设置渐变背景的话，就会有这种效果。

利用这个效果，我们可以在文段的上方覆盖一层文字内容和大小相同的行内元素，将其文字颜色设置为透明，然后设置一个渐变的背景色，通过调整背景色的区域来实现文段的尾行渐变，效果如下。

核心代码如下

        span {
            background: linear-gradient(90deg, transparent 80%, orange);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: 100% 100%;
            cursor: pointer;

            color: transparent;
            font-size: 24px;
            z-index: 4;

        }
        span::before {  
            content: "Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi      temporibus debitis quam commodi temporibus debitis quam debitis";
            position: absolute;
            top: 0;
            left: 0;
            color: #000;
            z-index: -1;
        }

其实可以看到，这里的效果就会比前面的遮罩的方法要好一点，但是即使这里的颜色控制的与背景很接近，也依然会有一点浮层的感觉。

除此之外，我们用来遮罩的盒子，为了和底层文段大小一致，需要填入相同的内容，这其实看起来非常的冗余，最致命的是，这个方法直对横向的渐变起作用，所以我们需要寻求更合适的方法。

遮罩mask

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

如果我们直接用在文段上，就可以得到这样的效果。

有了这个属性，顿时感觉问题解决了一大半，在使用的时候，我们就不再需要再去添加一个用于蒙层的盒子，而是只需要在文段上使用mask加上一层遮罩。

但是mask在单独使用的时候，会默认设置100%的宽高，所以这里需要多定义一个来将另一个遮罩来占据剩下的位置，所以这里一共定义了两个遮罩，一个在上方，一个在末行。

最终的效果:

最终的代码：

p {
    margin: auto;
    width: 450px;
    line-height: 36px;
    font-size: 20px;
    -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;
}

由于支持性不够完善，所以这里在编写的时候还需要加上前缀，这里一共定义了两个遮罩，一个在上方，一个在末行，原因是mask在单独使用的时候，会默认设置100%的宽高，所以这里需要多定义一个来将另一个遮罩推到我们需要的位置。

当然，有关于Mask，还有很多非常不错的用法