Bagaimana untuk Melaksanakan Elipsis Teks Berbilang Baris dengan CSS?

Melaksanakan Elipsis Teks pada Berbilang Baris

Walaupun CSS sahaja boleh mendayakan pemangkasan teks dengan elipsis untuk limpahan baris tunggal, mencapai kesan yang sama ke atas berbilang baris boleh menimbulkan cabaran. Soalan, "Elipsis limpahan teks pada dua baris [pendua]," meneroka isu ini.

Pada pandangan pertama, gabungan sifat CSS seperti text-overflow: ellipsis dan white-space: nowrap nampaknya mencukupi untuk teks pemangkasan. Walau bagaimanapun, ruang putih: nowrap menghalang teks daripada dibalut, membawa kepada teks terpotong pada satu baris walaupun ruang yang mencukupi untuk baris selanjutnya.

Untuk mengatasi pengehadan ini, pertimbangkan sifat CSS berikut:

• paparan: -webkit-box: Memulakan model susun atur kotak yang fleksibel, membenarkan berbilang baris teks.
• -webkit-line-clamp: 3: Mentakrifkan bilangan maksimum baris yang harus diduduki oleh teks (dalam kes ini, 3).
• -webkit-box-orient: menegak: Mengorientasikan susun atur kotak secara menegak, membolehkan berbilang baris teks.
• limpahan: tersembunyi: Menyembunyikan sebarang teks yang melebihi baris yang ditentukan.
• limpahan teks: elipsis: Menambah elipsis pada teks yang dipotong.

Menggunakan sifat ini, anda boleh mencapai elipsis teks berbilang baris sebagai berikut:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

Penyelesaian CSS ini dengan berkesan membenarkan teks melimpah ke berbilang baris dan dipotong dengan elipsis apabila had baris yang ditentukan dicapai.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Elipsis Teks Berbilang Baris dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!