Bagaimana untuk Mencipta Limpahan Teks Berbilang Baris dengan Ellipsis dalam CSS?

Limpahan Teks Berbilang Baris dengan Elipsis dalam CSS

Mencapai limpahan teks dengan elipsis tetapi membenarkan berbilang baris boleh mencabar. Walau bagaimanapun, sifat CSS boleh mencapainya dengan berkesan.

Untuk mencipta kesan elipsis tiga baris, gunakan kod berikut:

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

Kod ini menggunakan "-webkit-box" dan " -webkit-line-clamp" untuk memaksa teks ke dalam kotak dengan tiga baris. Sifat "-webkit-box-orient" menetapkan orientasi kepada menegak, manakala "overflow: hidden" dan "text-overflow: ellipsis" mencipta kesan elipsis.

Jika anda menghadapi masalah keserasian penyemak imbas, cuba pilihan sandaran berikut:

display: flex;
flex-wrap: wrap;
line-height: 1.5em;
height: 4.5em;
overflow: hidden;
text-overflow: ellipsis;

Sifat ini juga memaksa teks menjadi berbilang baris dan membenarkan limpahan elipsis.

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