Elipsis Teks Berbilang Baris: Adakah Ia Mungkin dengan CSS Tulen?

Elipsis Teks pada Berbilang Baris: Adakah Mungkin?

Keupayaan untuk memotong teks yang melimpah dengan elipsis (...) ialah keperluan CSS biasa. Walau bagaimanapun, sifat limpahan teks standard hanya berfungsi pada satu baris. Ini menimbulkan persoalan: bolehkah kita meniru gelagat ini pada berbilang baris, membenarkan teks dibalut mengikut keperluan?

Jawapannya ialah ya. Dengan sifat CSS yang direka khusus untuk tujuan ini, adalah mungkin untuk mencapai kesan yang diingini tanpa menggunakan JavaScript. Contohnya:

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

Kod ini akan mencipta div yang memaparkan teks pada sehingga tiga baris, dengan teks yang tinggal digantikan dengan elipsis. Dengan melaraskan sifat -webkit-line-clamp, anda boleh mengawal bilangan maksimum baris yang dipaparkan.

Perlu diingat bahawa teknik ini pada masa ini hanya berfungsi dalam penyemak imbas berasaskan WebKit seperti Safari dan Chrome. Jika anda memerlukan keserasian merentas penyemak imbas, anda boleh mempertimbangkan untuk menggunakan polyfill atau penyelesaian JavaScript yang lebih kompleks.

Atas ialah kandungan terperinci Elipsis Teks Berbilang Baris: Adakah Ia Mungkin dengan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!