Bagaimanakah Saya Boleh Membuat Elipsis Berbilang Baris dalam CSS untuk Pelayar Webkit?

Pemangkasan Teks Berbilang Baris dengan Elipsis dalam CSS

Keperluan untuk memekatkan teks yang panjang sambil mengekalkan kebolehbacaannya adalah cabaran biasa dalam reka bentuk web . CSS menyediakan sifat limpahan teks untuk memotong teks dengan elipsis, tetapi lazimnya, ini digunakan pada senario satu baris. Adakah mungkin untuk menggunakan elipsis pada baris kedua teks?

Dilema Teknikal

Dalam contoh yang disediakan, kesan yang diingini adalah untuk elipsis muncul pada baris kedua. Walau bagaimanapun, tingkah laku lalai memotong teks pada baris pertama, seperti yang ditunjukkan dalam penanda HTML yang disediakan:

<p>I hope someone could help me. I need 
an ellipsis on the second line of...</p>

Penyelesaian untuk Penyemak Imbas Webkit

Sementara CSS melakukannya tidak menyokong elipsis berbilang talian secara asli, penyelesaian tersedia untuk penyemak imbas berasaskan Webkit (seperti Safari dan Chrome). Coretan CSS berikut mencapai kesan yang diingini:

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

Pelaksanaan

Sifat CSS dalam coretan berfungsi bersama-sama seperti berikut:

• overflow: tersembunyi menghalang teks daripada melimpahi yang ditetapkan kawasan.
• limpahan-teks: elipsis mengaktifkan pemotongan elipsis.
• paparan: -kotak-webkit dan -pengapit-baris-webkit: 3 mengehadkan bilangan baris teks yang boleh dilihat kepada tiga.
• -webkit-box-orient: menegak menyusun baris teks secara menegak.

Keserasian Pelayar

Adalah penting untuk ambil perhatian bahawa penyelesaian ini hanya berfungsi dalam penyemak imbas Webkit. Pelayar lain mungkin tidak menyokong pendekatan ini. Walau bagaimanapun, ia menyediakan kaedah yang boleh dipercayai untuk elipsis berbilang baris dalam konteks yang ditentukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elipsis Berbilang Baris dalam CSS untuk Pelayar Webkit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!