文本多行省略号（CSS最优方案）

<div class="ellipses-div">
  <span class="ellipses-text">这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。</span>
</div>

.ellipses-div{
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
  width: 300px;

  &:before {
    float: left;
    content: ‘‘;
    height: 40px;
    width: 22px
  }
  .ellipses-text{
    float: right;
    width: 100%;
    margin-left: -22px;
    // word-break: break-all;
  }
  &:after {
    float: right;
    content: ‘...‘;
    width: 22px;
    height: 20px;
    position: relative;
    left: 100%;
    transform: translate(-100%, -100%);
    padding-left: 8px;
  }

}