Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menyesuaikan Teks Ellipsis dengan Line Clamp dalam CSS?

Bagaimana untuk Menyesuaikan Teks Ellipsis dengan Line Clamp dalam CSS?

Susan Sarandon
Lepaskan: 2024-12-03 02:54:11
asal
934 orang telah melayarinya

How to Customize Ellipsis Text with Line Clamp in CSS?

Teks Ellipsis Tersuai dengan Pengapit Garis

Masalah:

Menyembunyikan sebahagian daripada teks yang melebihi dua baris sambil menunjukkan limpahan tersembunyi dengan teks tersuai, seperti "...123 T."

Penyelesaian:

Pada masa hadapan, sifat pengapit talian akan menyediakan penyelesaian satu baris yang mudah:

line-clamp: 2 "...123 T.";
Salin selepas log masuk

Alternatif Hacky (untuk Penyemak Imbas Semasa):

Sehingga sifat pengapit talian meluas disokong, penyelesaian meretas melibatkan CSS dan HTML berikut:

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

Nota: Penyelesaian ini melibatkan mencipta rentang tersembunyi untuk menggantikan elipsis dan menggunakan bayangan kotak besar untuk menyembunyikan teks di belakang. Ia bukan penyelesaian yang ideal tetapi menyediakan pembetulan sementara sehingga pengapit talian digunakan secara meluas.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Teks Ellipsis dengan Line Clamp dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan