Bolehkah CSS Mencipta Elipsis pada Baris Kedua Teks?

Elipsis CSS pada Baris Kedua: Adakah Ia Boleh Dilaksanakan?

Dalam CSS, limpahan teks: elipsis digunakan secara meluas untuk menunjukkan teks terpotong dengan elipsis (...). Walau bagaimanapun, melaksanakan elipsis pada baris kedua blok teks berbilang baris telah lama menjadi cabaran.

Untuk mencapai kesan ini, dan bukannya bergantung pada limpahan teks, seseorang boleh mempertimbangkan untuk menggunakan -webkit-line- harta pengapit. Sifat ini mengehadkan bilangan baris yang dipaparkan dalam bekas blok. Dengan menggabungkannya dengan paparan: -webkit-box dan -webkit-box-orient: menegak, anda boleh mengehadkan teks kepada bilangan baris tertentu. Untuk memastikan keratan, limpahan: tersembunyi adalah disyorkan.

Coretan kod berikut menunjukkan pendekatan ini:

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

Teknik ini menggunakan awalan -webkit, menjadikannya serasi dengan penyemak imbas webkit. Walau bagaimanapun, perlu diingat bahawa sokongan untuk gabungan khusus ini mungkin berbeza-beza merentas versi penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Bolehkah CSS Mencipta Elipsis pada Baris Kedua Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!