Bagaimana untuk Menyembunyikan Teks Selepas Dua Baris dan Paparkan Penunjuk Limpahan seperti '...123 T.'?

Menyembunyikan Teks selepas Titik dengan Penunjuk Limpahan Baris Kedua

Apabila memaparkan teks dengan ruang terhad, selalunya perlu memotong dan menunjukkan limpahan. Soalan ini menangani cabaran menyembunyikan teks yang melebihi dua baris dan menambah "...123 T." ke baris kedua sebagai penunjuk.

Pelaksanaan Semasa

Kod yang disediakan pada mulanya menangani isu ini:

<div class="container">
  <span class="main-text">
    Long text that exceeds two lines.
  </span>
  <span class="small-text">123 T.</span>
</div>

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

Sementara ini kaedah menyembunyikan lebihan teks dalam dua baris, ia tidak serasi merentas pelayar dan mungkin tidak memenuhi sepenuhnya yang dikehendaki hasil.

Penyelesaian Masa Depan

Spesifikasi mencadangkan sifat trengkas, pengapit garis, yang boleh memudahkan tugas ini dalam satu baris:

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

Harta ini membenarkan penciptaan teks terpotong secara visual dengan limpahan penunjuk.

Alternatif Hacky

Sehingga sifat pengapit garis disokong secara meluas, penyelesaian boleh dicapai menggunakan penggodaman CSS:

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

<div class="main-text">
  Lorem ipsum ...<span>123 T.</span>
</div>

Dalam pendekatan ini, elemen rentang dengan titik tersembunyi dan "123 T." teks diletakkan di bahagian bawah sebelah kanan bekas. Bayang kotak besar digunakan untuk menyembunyikan titik daripada pandangan, hanya memaparkan elipsis.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Teks Selepas Dua Baris dan Paparkan Penunjuk Limpahan seperti '...123 T.'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!