The block-overflowharta truncates teks dan menunjukkan lebih banyak kandungan berikut dengan memasukkan satu elipsis atau tali adat selepas beberapa garisan yang ditetapkan oleh max-linesharta.
Properti ini telah diperkenalkan dalam Draf Editor spesifikasi CSS Overflow Module Level 3. Ini bermakna ia adalah eksperimen pada masa ini dan dianggap sebagai kerja yang sedang dijalankan. Sebenarnya, anda boleh mengikuti perbualan yang merangkumi perbincangan mengenai penamaan semula harta tanah sama sekali.
Sintaks
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow menerima nilai berikut:
clip: Tidak memasukkan watak untuk menunjukkan lebih banyak teks untuk diikuti. Sebaliknya, kandungannya hanya dipotong dan dipotong pada watak terakhir.ellipsis: Memaparkan elipsis (…) di hujung baris terakhir. Ia harus dibuat sebagai watak Unicode (U + 2026) tetapi boleh digantikan dengan yang setara berdasarkan bahasa kandungan dan mod penulisan Ejen Pengguna yang digunakan.: Memaparkan teks tersuai (mis. "Baca lebih lanjut →") pada akhir baris terakhir. Spesifikasi mengatakan bahawa Pengguna-Agen boleh mengganti rentetan dengan elipsis jika tali itu panjang "tidak masuk akal".
Sekali lagi, semua ini adalah eksperimen, sedang dijalankan. Nilai-nilai ini boleh berubah. Atau, lebih banyak yang boleh ditambah. Sebagai contoh, terdapat panggilan untuk elipsis "lebih pintar" yang mungkin dapat melakukan lebih banyak perkara, seperti memotong teks di tengah:
One thing led to another and… yada yada yada, that was that.Gunakan line-clampuntuk jangka masa pendek
Kita boleh mendapatkan hampir sama dengan menggunakan line-clampyang pendek untuk block-overflowdan max-linessifat.
Kerana ia ditakrifkan pada masa ini, walaupun, line-clamphanya menerima satu nilai angka untuk max-linesdan tersirat menetapkan block-overflowkepada ellipsisnilai. Oleh itu, jika anda ingin menggunakan rentetan khusus untuk pemotongan, maka anda harus menggunakan borang panjang sebagai gantinya.
Sokongan Penyemak Imbas
Tidak ada pada masa ini, tetapi anda boleh mendapatkan sokongan menggunakan pelaksanaan eksklusif WebKit line-clamp:
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Tidak | 17 | 5 * |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 * | 85 * | 2.3 * | 5.0-5.1 * |