Bagaimanakah Saya Boleh Memotong Teks pada Baris Kedua Menggunakan CSS?

Memangkas Teks pada Garis Tertentu dalam CSS: Membongkar Enigma Ellipsis

Soalan Asal:

"Bagaimana saya boleh mencapai elipsis teks khusus pada baris kedua menggunakan CSS Walaupun mencari di internet, saya telah datang dengan tangan kosong."

Jawapan:

Walaupun CSS tidak menyediakan cara langsung untuk memotong teks pada baris tertentu, anda boleh mencapai kesan ini dalam pelayar webkit dengan CSS berikut sifat:

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

Penjelasan:

• limpahan: tersembunyi: Sifat ini menghalang kandungan daripada melimpah melebihi sempadan bekas.
• limpahan teks: elipsis: Sifat ini mengarahkan penyemak imbas untuk menggunakan elipsis (...) apabila teks melebihi yang tersedia ruang.
• paparan: -webkit-box: Sifat ini menetapkan bekas menjadi model kotak webkit, yang membenarkan pilihan penggayaan tambahan.
• -webkit-line-clamp: 3: Ini sifat mengehadkan bekas kepada tiga baris teks.
• -webkit-box-orient: menegak: Sifat ini menetapkan orientasi model kotak kepada menegak, membenarkan teks untuk dibalut kepada berbilang baris.

Sokongan Penyemak Imbas:

Perhatikan bahawa penyelesaian ini hanya disokong dalam penyemak imbas webkit, termasuk Safari, Chrome dan Microsoft Tepi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memotong Teks pada Baris Kedua Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!