Bagaimana untuk memaparkan elips melebihi dua baris dalam css

Dalam CSS, atribut limpahan teks boleh digunakan untuk memaparkan elipsis apabila kandungan teks melebihi kawasan yang ditentukan, menjadikan halaman lebih cantik. Berikut ialah pengenalan terperinci:

1. sifat limpahan-teks

Sifat limpahan-teks dalam CSS digunakan untuk menetapkan perkara yang perlu dilakukan apabila kandungan unsur melimpah kotaknya. Ia mempunyai tiga nilai sepunya:

• klip: Klip teks agar sesuai dengan lebar elemen. Menyekat teks di belakang kandungan dan tidak memaparkan elips.
• elipsis: Memaparkan elipsis (...) untuk menunjukkan teks potong.
• rentetan: Tukar aksara elipsis kepada rentetan yang ditentukan.

Dalam contoh berikut, kita dapat melihat bahawa apabila teks melimpahi bekas induk, elips digunakan untuk menyingkat kandungan.

div {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Atribut ruang putih digunakan untuk menentukan cara mengendalikan ruang putih dalam elemen, dan nowrap bermaksud teks tidak akan dibalut. Atribut limpahan digunakan untuk menentukan cara mengendalikan apabila kandungan unsur melimpah dan tersembunyi bermakna kandungan yang melimpah disembunyikan.

2. Digabungkan dengan atribut ketinggian maksimum

Apabila terdapat terlalu banyak teks dalam elemen, anda perlu mengehadkan bilangan baris paparan teks dengan menetapkan ketinggian . Jika anda mengehadkan ketinggian, gunakan teks Atribut -overflow mungkin mendapati bahawa elipsis masih gagal muncul.

Alasannya ialah limpahan teks hanya berfungsi pada elemen peringkat blok dengan lebar tetap. Oleh itu, kita perlu menggabungkan atribut ketinggian maks untuk menyelesaikan masalah ini.

Dalam contoh berikut, kami menetapkan ketinggian maksimum elemen kepada tiga baris Apabila teks melebihi tiga baris, gunakan elips untuk menyingkat kandungan.

div {
  width: 150px;
  max-height: 3em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Antaranya, atribut -webkit-line-clamp digunakan untuk menentukan bilangan baris teks, dan atribut -webkit-box-orient digunakan untuk menentukan arah teks yang bermaksud itu teks disusun secara menegak.

3. Digabungkan dengan JavaScript

Kaedah di atas adalah berdasarkan pelaksanaan gaya CSS Jika anda ingin memaparkan kandungan artikel secara dinamik, anda perlu menggabungkannya dengan JavaScript .

Tentukan sama ada elipsis perlu dipaparkan dengan mengira ketinggian sebenar unsur dan ketinggian sebenar kandungan. Berikut ialah contoh mudah:

var element = document.querySelector('.element');
var contentHeight = element.scrollHeight;
var elementHeight = parseInt(getComputedStyle(element).height);

if (contentHeight > elementHeight) {
  element.addEventListener('click', function() {
    this.classList.toggle('expand');
  });
}

Dalam contoh ini, kita mula-mula mendapat ketinggian kandungan elemen dan ketinggian sebenar elemen Jika ketinggian kandungan lebih besar daripada ketinggian elemen, kemudian tambah acara klik ke elemen, melalui gaya CSS menunjukkan atau menyembunyikan kandungan teks.

4. Nota Lain

   • Sifat limpahan teks hanya berfungsi pada elemen baris tunggal atau elemen peringkat blok dengan lebar yang ditentukan.
   • Apabila menggunakan atribut text-overflow, atribut white-space hendaklah nowrap.
   • Apabila digabungkan dengan atribut ketinggian maks, atribut ruang putih hendaklah normal dan atribut -webkit-line-clamp harus digunakan untuk menentukan bilangan baris.
   • Penyemak imbas yang berbeza mungkin mempunyai sokongan yang berbeza untuk atribut limpahan teks, jadi sila gunakannya dengan berhati-hati.

Secara umumnya, menggunakan atribut limpahan teks boleh menjadikan halaman lebih cantik dan memaparkan kandungan artikel dengan lebih baik. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan elips melebihi dua baris dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!