Bagaimana untuk Memotong Teks pada Baris Kedua dengan CSS?

Pemotongan CSS pada Baris Kedua: Penyelesaian Terperinci

Mencapai pemotongan teks pada baris kedua menggunakan CSS boleh menjadi cabaran yang kurang jelas dokumentasi dalam talian. Artikel ini menyediakan penyelesaian langkah demi langkah untuk membantu anda mengatasi halangan ini.

Objektifnya ialah untuk memaparkan elipsis (...) pada penghujung baris kedua teks, bukannya keseluruhan teks melimpah ke baris ketiga.

Untuk mencapai kesan ini, kami menggunakan sifat CSS tertentu:

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

Sifat ini berfungsi dalam kata hubung seperti berikut:

• limpahan: tersembunyi menyimpan teks dalam kawasan yang ditentukan.
• limpahan-teks: elipsis menambah elipsis jika teks melebihi ruang yang tersedia.
• paparan: -webkit-box dan -webkit-line-clamp: 3 memastikan bahawa teks dibalut kepada berbilang baris tetapi terhad kepada tiga garisan.
• -webkit-box-orient: menegak mengorientasikan garis secara menegak.

Perhatikan bahawa penyelesaian ini hanya disokong sepenuhnya dalam penyemak imbas WebKit, seperti Chrome dan Safari. Penyemak imbas lain mungkin memerlukan pendekatan yang berbeza atau mungkin tidak menyokong pemangkasan teks pada baris kedua secara eksplisit.

Atas ialah kandungan terperinci Bagaimana untuk Memotong Teks pada Baris Kedua dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!