Bagaimanakah saya boleh menyembunyikan limpahan teks selepas baris kedua dengan elipsis dan pembilang tersuai ('...123 T.')?

Menyembunyikan Limpahan Teks selepas Baris Kedua dengan Ellipsis dan Counter

Masalah:

Menyembunyikan bahagian daripada teks yang melebihi dua baris dan menambah "...123 T." sebagai penunjuk limpahan tersembunyi memerlukan penyelesaian yang bijak.

Penyelesaian:

Walaupun kemas kini masa hadapan akan menyediakan pendekatan yang lebih mudah menggunakan sifat pengapit garis, berikut ialah penggodaman kreatif untuk mencapai ini kesan:

CSS:

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

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

.main-text:after {
  content: "123 T.";
  display: inline-block;
  width: 40px;
  position: relative;
  z-index: 999;
  /* big box shadow to hide the ellipsis */
  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; /* cover text beneath */
  margin-left: 2px;
}

.main-text span {
  position: absolute;
  /* bottom right position */
  top: 1.2em; /* 1 line height */
  right: 0;
  padding: 0 3px;
  background: #fff; /* cover text beneath */
}

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

.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>

Teknik ini memastikan bahawa ".. .123 T." penunjuk muncul selepas teks telah dipotong pada baris kedua.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyembunyikan limpahan teks selepas baris kedua dengan elipsis dan pembilang tersuai ('...123 T.')?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!