Penjepit garisan - Trik CSS | CSS Almanac 2025

The line-clamptruncates harta teks pada bilangan tertentu baris.

Spesifikasi untuknya saat ini adalah Draf Editor, sehingga tidak ada artinya di sini yang tidak berfungsi kerana ia sedang dijalankan. Yang mengatakan, itu didefinisikan sebagai singkatan untuk max-linesdan block-overflow, yang pertama dinyatakan berisiko digugurkan dalam Cadangan Calon.

Sangat mudah untuk melihat bagaimana max-linesia akan terganggu kerana fungsinya (menetapkan bilangan garis sebelum memotong) sudah dimasukkan ke dalam line-clampdan pengabaian lebih lanjut mungkin tidak perlu. Tetapi itu membuat kita tidak mengikut jalan, jadi mari kita teruskan.

Sintaks

.module ( line-clamp: (none | ); )

line-clamp menerima nilai berikut dalam draf spesifikasi semasa:

none: tidak menetapkan maksimum pada jumlah baris dan tidak ada pemotongan yang akan terjadi.
: menetapkan bilangan garis maksimum sebelum memangkas kandungan dan kemudian memaparkan elipsis (…) pada akhir baris terakhir.

Elipsis itu harus dinyatakan sebagai watak Unicode (U + 2026) tetapi boleh digantikan dengan setara berdasarkan bahasa kandungan dan mod penulisan Ejen Pengguna yang sedang digunakan.

Hei, tidak bolehkah saya melakukan ini dengan limpahan teks?

Soalan yang adil, kawan saya, dan jawapannya, baiklah ...

(Lihat apa yang saya buat di sana?)

... agak.

text-overflowmemang mempunyai ellipsisnilai yang akan memotong teks:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Lihat limpahan teks Pen oleh Geoff Graham (@geoffgraham) di CodePen.

Bagus bagus, itu permulaan yang baik. Tetapi bagaimana jika kita ingin memperkenalkan elipsis bukan pada baris pertama tetapi di suatu tempat, katakan, baris ketiga teks?

Di situlah line-clampbermulanya permainan. Perhatikan bahawa gabungan tiga sifat digunakan untuk mewujudkannya:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Lihat penjepit garis Pen (-webkit) oleh Geoff Graham (@geoffgraham) di CodePen.

Firefox menyokongnya sekarang, tepat seperti ini (dengan -webkit-awalan dan semua).

Jadi, apa tangkapannya?

Setakat ini, sokongan penyemak imbasnya. Penjepit talian adalah sebahagian daripada Modul Limpahan Tahap 3 CSS yang kini dalam Draf Editor dan tidak disokong pada masa ini.

Kita boleh mendapatkan beberapa tindakan penjepit garis dengan -webkit-awalan (yang, cukup pelik, berfungsi di semua penyemak imbas utama). Sebenarnya, itulah cara demo di atas dilakukan.

Kita boleh melalui jalan JavaScript jika kita mahu. Clamp.js akan melakukan silap mata:

Lihat penjepit garis Pen (clamp.js) oleh Geoff Graham (@geoffgraham) di CodePen.

Sokongan Penyemak Imbas

Ini adalah sokongan untuk pelaksanaan sistem penjepit talian yang tepat dan tidak berdokumen.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.