Bagaimana untuk Menyesuaikan Teks Ellipsis dengan Line Clamp dalam CSS?

Teks Ellipsis Tersuai dengan Pengapit Garis

Masalah:

Menyembunyikan sebahagian daripada teks yang melebihi dua baris sambil menunjukkan limpahan tersembunyi dengan teks tersuai, seperti "...123 T."

Penyelesaian:

Pada masa hadapan, sifat pengapit talian akan menyediakan penyelesaian satu baris yang mudah:

line-clamp: 2 "...123 T.";

Alternatif Hacky (untuk Penyemak Imbas Semasa):

Sehingga sifat pengapit talian meluas disokong, penyelesaian meretas melibatkan CSS dan HTML berikut:

CSS:

.container {
  max-width: 200px;
  margin: 5px;
}

.main-text {
  line-height: 1.2em; 
  max-height: calc(2 * 1.2em); 
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff;
  margin-left:2px;
}

.main-text span {
  position: absolute;
  top: 1.2em;
  right: 0;
  padding: 0 3px;
  background: #fff;
}

.main-text span:before {
  content: "..."; 
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

HTML:

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
    vitae. <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

Nota: Penyelesaian ini melibatkan mencipta rentang tersembunyi untuk menggantikan elipsis dan menggunakan bayangan kotak besar untuk menyembunyikan teks di belakang. Ia bukan penyelesaian yang ideal tetapi menyediakan pembetulan sementara sehingga pengapit talian digunakan secara meluas.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Teks Ellipsis dengan Line Clamp dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!