Bagaimana untuk Menyembunyikan Limpahan Teks dengan Penunjuk Tersuai dalam CSS?

Menyembunyikan Limpahan Teks dengan Penunjuk

Untuk memekatkan teks yang melebihi dua baris dan menunjukkan kandungan tersembunyi, penyelesaian tersuai boleh dilaksanakan sehingga pelaksanaan masa hadapan bagi sifat pengapit talian.

Tersuai Penyelesaian

1. Tetapkan ketinggian garisan dan ketinggian maksimum bekas teks untuk mengehadkan paparannya kepada dua baris.
2. Gunakan limpahan: sifat tersembunyi untuk menyembunyikan teks yang melimpah.
3. Buat kesan bayang-bayang untuk mengaburkan teks yang akan didedahkan oleh elipsis sebaliknya.
4. Letakkan elemen span dengan teks penunjuk yang diingini di bahagian bawah sebelah kanan bekas, menggunakan kedudukan mutlak.
5. Tambahkan elipsis pada permulaan elemen span dan teks penunjuk ke itu tamat.

CSS

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

Penyelesaian ini menyembunyikan teks limpahan dan menunjukkan penunjuk yang ditentukan selepas dua baris.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Limpahan Teks dengan Penunjuk Tersuai dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!