<div class="text-wrapper">
    <div class="more-line-text">
      more-line-text more-line-text
      more-line-text more-line-text
      more-line-text more-line-text
      more-line-text more-line-text
      more-line-text more-line-text
      more-line-text more-line-text more-line-text
      more-line-text more-line-text
      more-line-text more-line-text
      more-line-text more-line-text
    </div>
  </div>

  .text-wrapper {
    height: 40px;
    line-height: 20px;
    overflow: hidden;
  }

  .text-wrapper .more-line-text {
    float: right;
    margin-left: -5px;
    width: 100%;
    word-break: break-all;
  }

  .text-wrapper::before {
    float: left;
    width: 5px;
    content: '';
    height: 40px;
  }

  .text-wrapper::after {
    float: right;
    content: "...";
    height: 20px;
    line-height: 20px;
    /* 为三个省略号的宽度 */
    width: 3em;
    /* 使盒子不占位置 */
    margin-left: -3em;
    /* 移动省略号位置 */
    position: relative;
    left: 100%;
    top: -20px;
    padding-right: 5px;
    text-align: center;
    background: linear-gradient(to right,transparent 0%, transparent 30%,#FFF 30%, #FFF);
  }