Bagaimana Saya Boleh Memotong Teks dengan Elipsis dan Tambah '123 T.' pada Baris Seterusnya?

Letak Teks Selepas Titik Sebaris dengan Baris Kedua Elipsis Limpahan Teks

Isu

Untuk memekatkan teks yang terlalu panjang, anda berhasrat untuk menyembunyikan sebahagian daripada teks sambil menunjukkan limpahan dengan '...123 T.' pada baris berikutnya, seperti yang dilihat dalam imej di bawah:

[Imej teks dipotong dengan elipsis dan "123 T."]

Penyelesaian

Dalam masa terdekat, satu baris kod dengan "line-clamp: 2 "...123 T.;" akan mencukupi. Maklumat lanjut ialah tersedia dalam spesifikasi.

Penafian

Sebelum fungsi ini tersedia secara meluas, berikut ialah penyelesaian kasar untuk mencapai yang diingini hasil:

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>

Atas ialah kandungan terperinci Bagaimana Saya Boleh Memotong Teks dengan Elipsis dan Tambah '123 T.' pada Baris Seterusnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!