html mask 样式,css篇-mask-image + linear-gradient 优雅显示富文本过长

如何优雅显示富文本过长？

明人不说暗话，直接上例子

效果图-超出收起状态

效果图-超出伸展状态

html dom结构

我是一个粉刷匠，粉刷本领强

我是一个粉刷匠，粉刷本领强

我是一个粉刷匠，粉刷本领强

我是一个粉刷匠，粉刷本领强

嘻嘻

:src="isOpen?'open.png':'close.png'"

class="icon icon--open-all"

@click="tapOpenAll" />

css实现方式 [ 部分 ]

// ...

.rich-text {

// 外层div样式

&__words {

height: 150px;

overflow: hidden;

-webkit-mask-image: linear-gradient(#1a1a1a 55%, transparent);

mask-image: linear-gradient(#1a1a1a 55%, transparent);

-webkit-mask-size: 100% 100%;

mask-size: 100% 100%;

}

// 打开时候不显示mask

&.open {

mask-image: none;

-webkit-mask-image: none;

}

}

// ...

关键css

-webkit-mask-image: linear-gradient(#1a1a1a 55%, transparent);

mask-image: linear-gradient(#1a1a1a 55%, transparent);

-webkit-mask-size: 100% 100%;

mask-size: 100% 100%;

说明

mask-image： CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。

linear-gradient：用线性渐变创建图像。

起因

由于富文本属于长文本，在页面上我们会有这种超出隐藏的功能需求，

如果是纯文本的话，我们大可以用slice截取字符串的方式来先显示几个字的方式，

但是由于富文本是由不同的html标签组成，这样的我们就会显得棘手。

如果我们不用蒙版遮罩的方式，就会变成这样

裁剪了一部分字的感觉

裁剪了一部分图片的感觉

不做处理的话，就觉得比较生硬，所以用上了mask-image + linear-gradient 就会显得比较优雅。

这里只是用了mask-image的一些属性，当然mask-image能够做的不止这些，具体有兴趣的可以去摸索看看咯。

真正的前端不只要会撸一手好的js，还要去考虑ued，我们都要知道第一印象很重要。

——尼古拉斯·峰