如何优雅显示富文本过长？
明人不说暗话，直接上例子
效果图-超出收起状态
效果图-超出伸展状态
html dom结构
<div class="rich-text">
<div class="rich-text__words">
<p>我是一个粉刷匠，粉刷本领强</p>
<p>我是一个粉刷匠，粉刷本领强</p>
<p>我是一个粉刷匠，粉刷本领强</p>
<p>我是一个粉刷匠，粉刷本领强</p>
<p style="text-align: center"><img style="max-width:100%;" src="https://img.kanhua.yiwaiart.com/eyadmin/fd63bba6-5d66-4d10-b83b-4d9d7c38e4db.jpg"/></p>嘻嘻<p><br/></p>
</div>
<img v-if="isShowOpen"
:src="isOpen?'open.png':'close.png'"
class="icon icon--open-all"
@click="tapOpenAll" />
</div>
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，我们都要知道第一印象很重要。
——尼古拉斯·峰
