Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta Elipsis Berbilang Baris dalam CSS?

Bagaimanakah Saya Boleh Mencipta Elipsis Berbilang Baris dalam CSS?

Linda Hamilton
Linda Hamiltonasal
2024-12-18 06:42:19880semak imbas

How Can I Create Multi-Line Ellipsis in CSS?

Menggunakan CSS untuk Elipsis Berbilang Baris dalam Blok Limpahan

Limpahan sifat CSS yang diberikan: tersembunyi; limpahan teks: elipsis; white-space: nowrap; biasanya digunakan untuk memotong teks dalam bekas satu baris. Walau bagaimanapun, bagaimana jika anda perlu menggunakan elipsis pada berbilang baris teks yang melimpah?

Hasil yang Diingini:

Matlamatnya adalah untuk mendapatkan bekas teks berbilang baris dengan elipsis (...). Sebagai contoh, pertimbangkan contoh berikut:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...| /* Here it's overflowed, so "..." is shown. */
+--------------------+

Had Semasa:

Malangnya, sifat CSS yang dinyatakan di atas hanya digunakan pada elemen satu baris. Untuk mencapai kefungsian berbilang baris yang diingini, penyelesaian luaran diperlukan.

Pemalam jQuery untuk Elipsis Berbilang Talian

Beberapa pemalam jQuery tersedia yang mengendalikan perkara ini secara khusus isu:

  • http://pvdspek.github.com/jquery.autoellipsis/
  • http://dotdotdot.frebsite.nl/
  • http://keith-wood.name/more.html
  • http://github.com/tbasse/jquery-truncate

Ini pemalam menyediakan pelbagai pilihan untuk menyesuaikan gelagat elipsis, seperti kesan putus garis dan pudar.

Pertimbangan Prestasi:

Perlu ambil perhatian bahawa prestasi mungkin berbeza antara ini pemalam. Untuk menentukan penyelesaian yang paling sesuai, pertimbangkan faktor seperti bilangan baris, prestasi penyemak imbas anda dan kesan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Elipsis Berbilang Baris dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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