Bagaimanakah Saya Boleh Mencipta Elipsis Limpahan Teks Berbilang Baris dengan CSS?

Elipsis Limpahan Teks pada Berbilang Baris

Walaupun peraturan CSS boleh memotong teks dengan elipsis dengan berkesan apabila ia melebihi sempadan yang ditentukan, mencapai kesan yang sama pada berbilang baris boleh mencabar. Walau bagaimanapun, menggunakan gabungan sifat CSS membolehkannya.

Untuk mencapai elipsis pada berbilang baris, pendekatan berikut boleh digunakan:

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

Begini cara sifat ini berfungsi:

• paparan: -webkit-box: Tetapkan elemen sebagai kotak fleksibel model.
• -webkit-line-clamp: 3: Menentukan bilangan maksimum baris yang harus diduduki oleh teks sebelum dipotong. Dalam kes ini, ia ditetapkan kepada 3 baris.
• -webkit-box-orient: menegak: Mengorientasikan kotak secara menegak, membenarkan teks dibalut pada berbilang baris.
• limpahan: tersembunyi: Memastikan bahawa sebarang kandungan berlebihan di luar baris yang ditentukan tidak dipaparkan.
• limpahan teks: elipsis: Mencetuskan elipsis apabila teks melimpahi baris yang ditetapkan.

Menggunakan sifat ini, teks boleh dipotong dengan elegan pada berbilang baris, memberikan paparan yang jelas dan ringkas.

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