原生js处理多行文本溢出

介绍

目前文本溢出的处理可以使用css实现单行及多行溢出显示省略号，但是兼容性可能不太好。
最近我发现一个兼容性比较广的方法，那就是getClientRects，大家可以点击链接查看完整的介绍。
这里简单介绍一下，对于块元素没什么好说的，主要是对于行内元素(比如a，span)会将每一行文本的位置信息作为ClientRect对象返回，主要包含left，top，right，bottom，width，height等属性。

示例

<div class="box">
      <a class="content">
        随便一段特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长的文本。
      </a>
</div>

.box {
   
  width: 100px;
  padding: 10px;
  border: 10px solid red;
}
.text-ellipsis {
   
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.right-bottom {
   
  position: absolute;
  display: inline-block;
  padding: 0 10px;
  font-size: 14px;
  line-height: 21px;
  color: rgb(42, 72, 172);
  background-image: linear-gradient(to right, #ffffffd6, #ffffffff);
  right: 0