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

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

效果图-超出收起状态
效果图-超出伸展状态

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%;

说明

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

起因

由于富文本属于长文本，在页面上我们会有这种超出隐藏的功能需求，
如果是纯文本的话，我们大可以用slice截取字符串的方式来先显示几个字的方式，
但是由于富文本是由不同的html标签组成，这样的我们就会显得棘手。
如果我们不用蒙版遮罩的方式，就会变成这样

裁剪了一部分字的感觉
裁剪了一部分图片的感觉

不做处理的话，就觉得比较生硬，所以用上了mask-image + linear-gradient 就会显得比较优雅。
这里只是用了mask-image的一些属性，当然mask-image能够做的不止这些，具体有兴趣的可以去摸索看看咯。

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