[CSSチュートリアル】Pure CSSカスタム複数行抜け問題（原理から実装まで）

/* Principle: set text to not break lines, hide after overflow, truncate to show ellipsis */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="box">
  <! -- text box -->
  <div class="box__text"> Tencent enriches the lives of Internet users with technology. Through communication and social software WeChat and QQ, it facilitates users' connections and helps them connect to digital content and lifestyle services at the snap of a finger. </div>
  <! -- placeholder box -->
  <div class="box__placeholder"></div>
  <! -- Custom omitted boxes -->
  <div class="box__more">... Expand</div>
</div>

<style>
  .box__text {
    width: 100%;
    height: 60px;
    line-height: 20px;
    background-color: pink;
    float: right;
  }

  .box__placeholder {
    width: 60px;
    height: 60px;
    background-color: gray;
    opacity: 0.8;
    float: right;
  }

  .box__more {
    width: 60px;
    text-align: right;
    background: yellow;
    float: right;
  }
</style>

.box__text {
  margin-left: -60px;
}

.box__more {
  position: relative;
  left: 100%;
  transform: translate(-100%, -100%);
}

.box {
  position: relative;
  overflow: hidden;
}

.box__more {
  color: #1890ff;
  background-image: linear-gradient(to left, white 40%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
}

.box__text {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 60px;
  line-height: 0;
  letter-spacing: 0; /* Resets line height and text spacing to ensure that ellipsis occupancy is only affected by font size */
  color: red; /* For demonstration purposes, we give the ellipsis a color first */
}

<div class="box__text">
    <div class="box__inner">
      Tencent enriches the lives of Internet users with technology. Through its communication and social networking software WeChat and QQ, Tencent facilitates users' connections and helps them connect to digital content and lifestyle services at the snap of a finger.
    </div>
</div>

<style>
  .box__inner {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    vertical-align: top;
    display: inline;
  }
</style>

.box__text {
  opacity: 0;
  color: transparent;
}

<div class="box__abs">
    <div class="box__fake-text">
      Tencent enriches the lives of Internet users with technology. Through its communication and social networking software WeChat and QQ, it facilitates users' connections and helps them connect to digital content and lifestyle services at the snap of a finger.
    </div>
    <div class="box__placeholder"></div>
    <div class="box__more">... Expand</div>
</div>

<style>
  .box__abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
</style>

.box__fake-text {
  width: 100%;
  margin-left: -60px;
  line-height: 20px;
  float: right;
  color: transparent; /* text is meant to brace the height, with float to achieve multi-line overflow omission */
}

.box__placeholder {
  width: 60px;
  height: 60px;
  float: right;
}

.box__more {
  position: relative;
  left: 100%;
  transform: translate(-100%, -100%);
  width: 60px;
  text-align: right;
  color: #1890ff;
  float: right;
}