JSFiddle - React, Tailwind, and code Playground

by Majo Chiou

HTML

<div class="bText">
  <p class="bText-descriptiion">
    塞爾提克於美國時間2月23日會在Staples Center客場出賽，他們原定24日中午就會搭機離開洛杉磯，不過得知湖人將於24日上午進行Kobe追悼會後，塞爾提克也特別將班機時間給延後，讓球員們可以先出席追悼會。
  </p>
  <button class="bText-more">更多內容</button>
</div>

<!-- 回答這裡的發問 https://ithelp.ithome.com.tw/questions/10197159 -->

CSS

body {background: #fff;}
.bText {
  position: relative;
}
.bText .bText-descriptiion {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis ellipsis;
}
.bText .bText-more {
  position: absolute;
  right: 0;
  bottom: 0;
  overflow: visible;
  padding: 2px;
}
.bText .bText-more::before {
  position: absolute;
  display: block;
  right: 100%;
  margin-right: 1px;
  transform: translateX(-100);
  content: '...';
  background: #fff;
  padding: 2px 0.5em;
  pointer-events: none;
}