Garis-penjepit - Trik CSS | CSS Almanak 2024

The line-clampmemotong properti teks di sejumlah tertentu dari baris.

Spesifikasi untuk itu saat ini adalah Draf Editor, jadi itu berarti tidak ada yang ditetapkan di sini karena sedang dalam proses. Meskipun demikian, ini didefinisikan sebagai singkatan dari max-linesdan block-overflow, yang pertama disebutkan berisiko dicabut dalam Rekomendasi Kandidat.

Sangat mudah untuk melihat bagaimana max-linesnixed karena fungsinya (mengatur jumlah baris sebelum pemotongan) sudah dimasukkan line-clampdan abstraksi lebih lanjut mungkin tidak diperlukan. Tapi itu membuat kita keluar jalur, jadi mari kita lanjutkan.

Sintaksis

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

line-clamp menerima nilai berikut dalam draf spesifikasi saat ini:

none: tidak menetapkan jumlah maksimum baris dan akibatnya tidak akan terjadi pemotongan.
: menetapkan jumlah baris maksimum sebelum memotong konten dan kemudian menampilkan elipsis (…) di akhir baris terakhir.

Elipsis tersebut harus dirender sebagai karakter Unicode (U + 2026) tetapi dapat diganti dengan yang setara berdasarkan bahasa konten dan mode penulisan User-Agent yang digunakan.

Hei, tidak bisakah saya melakukan ini dengan teks melimpah?

Pertanyaan yang wajar sobat, dan jawabannya adalah, yah…

(Lihat apa yang saya lakukan di sana?)

… Agak.

text-overflowmemang memiliki ellipsisnilai yang akan memotong teks:

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

Lihat Pen text-overflow oleh Geoff Graham (@geoffgraham) di CodePen.

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

Di situlah line-clampberperan. Perhatikan bahwa kombinasi dari tiga properti digunakan untuk mewujudkannya:

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

Lihat Pen line-clamp (-webkit) oleh Geoff Graham (@geoffgraham) di CodePen.

Firefox mendukung ini sekarang, persis seperti ini (dengan -webkit-awalan dan semuanya).

Jadi, apa hasil tangkapannya?

Untuk saat ini, ini adalah dukungan browser. Klem garis adalah bagian dari CSS Overflow Module Level 3 yang saat ini ada dalam Draf Editor dan sama sekali tidak didukung saat ini.

Kita bisa mendapatkan tindakan penjepitan baris dengan -webkit-awalan (yang, anehnya, bekerja di semua browser utama). Nyatanya, begitulah demo di atas dilakukan.

Kita bisa mengikuti jalur JavaScript jika kita mau. Clamp.js akan melakukan triknya:

Lihat Pen line-clamp (clamp.js) oleh Geoff Graham (@geoffgraham) di CodePen.

Dukungan Browser

Ini adalah dukungan untuk kepatutan WebKit dan implementasi penjepit baris yang tidak berdokumen.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.