Bagaimana Saya Boleh Memotong Teks dengan Elipsis dan Tambah '123 T.' pada Baris Seterusnya?-tutorial css-php.cn

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

Patricia Arquette

Lepaskan： 2024-12-04 01:24:11

asal

207 orang telah melayarinya

How Can I Truncate Text with an Ellipsis and Append

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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!