Bagaimana untuk Menyesuaikan Teks Ellipsis dengan Line Clamp dalam CSS?-tutorial css-php.cn

Bagaimana untuk Menyesuaikan Teks Ellipsis dengan Line Clamp dalam CSS?

Susan Sarandon

Lepaskan： 2024-12-03 02:54:11

asal

937 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!