The block-overflowproperti memotong teks dan menunjukkan lebih banyak konten berikut dengan memasukkan elipsis atau tali kustom setelah jumlah baris yang ditetapkan oleh max-linesproperti.
Properti ini telah diperkenalkan dalam spesifikasi Draf Editor dari CSS Overflow Module Level 3. Artinya, saat ini masih eksperimental dan dianggap sebagai pekerjaan yang sedang berlangsung. Bahkan, Anda bisa mengikuti percakapan yang berisi obrolan tentang mengganti nama properti sama sekali.
Sintaksis
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow menerima nilai-nilai berikut:
clip: Tidak menyisipkan karakter untuk menunjukkan lebih banyak teks untuk diikuti. Sebaliknya, konten hanya dipotong dan dipotong di karakter terakhir.ellipsis: Menampilkan elipsis (…) di akhir baris terakhir. Ini harus dirender sebagai karakter Unicode (U + 2026) tetapi dapat diganti dengan yang setara berdasarkan bahasa konten dan mode penulisan User-Agent yang digunakan.: Menampilkan teks kustom (mis. "Baca selengkapnya →") di akhir baris terakhir. Spesifikasi mengatakan bahwa User-Agent dapat mengganti string dengan elipsis jika panjang string "tidak masuk akal".
Sekali lagi, semua ini adalah pekerjaan eksperimental yang sedang berlangsung. Nilai-nilai ini bisa berubah. Atau, lebih bisa ditambahkan. Misalnya, ada panggilan untuk elipsis "lebih pintar" yang mungkin mampu melakukan lebih banyak hal, seperti memotong teks di tengah:
One thing led to another and… yada yada yada, that was that.Gunakan line-clampsingkatnya
Kita bisa mendapatkan hal yang hampir sama dengan menggunakan line-clampkependekan dari block-overflowdan max-linesproperti.
Namun, seperti yang saat ini ditentukan, line-clamphanya menerima satu nilai numerik untuk max-linesdan secara implisit ditetapkan block-overflowke ellipsisnilai tersebut. Jadi, jika Anda ingin menggunakan string khusus untuk pemotongan, Anda harus menggunakan bentuk panjang sebagai gantinya.
Dukungan Browser
Saat ini tidak ada, tetapi Anda bisa mendapatkan dukungan menggunakan implementasi milik WebKit dari line-clamp:
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Tidak | 17 | 5 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2.3 * | 5.0-5.1 * |