block-overflowProprietatea trunchiază de text și indică mai mult conținut urmează prin inserarea unei elipse sau un șir personalizat după un anumit număr de linii , care este stabilit de max-linesproprietate.
Proprietatea a fost introdusă în proiectul editorului specificației de nivel 3 a modulului CSS Overflow Module. Asta înseamnă că este experimental în acest moment și este considerat o lucrare în curs. De fapt, puteți urmări conversația care include discuții despre redenumirea totală a proprietății.
Sintaxă
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow acceptă următoarele valori:
clip: Nu introduce un caracter pentru a indica mai mult text de urmat. În schimb, conținutul este doar trunchiat și tăiat la ultimul caracter.ellipsis: Afișează o elipsă (...) la sfârșitul ultimei linii. Ar trebui redat ca un caracter Unicode (U + 2026), dar ar putea fi înlocuit cu un echivalent pe baza limbajului de conținut și a modului de scriere al utilizatorului-agent utilizat.: Afișează text personalizat (de ex. „Citiți mai multe →”) la sfârșitul ultimului rând. Specificația spune că User-Agent poate înlocui șirul cu o elipsă dacă șirul este „absurd” lung.
Din nou, toate acestea sunt lucrări experimentale, în curs de desfășurare. Aceste valori s-ar putea schimba. Sau, s-ar putea adăuga mai multe. De exemplu, au fost solicitate o elipsă „mai inteligentă” care ar putea fi capabilă să facă mai multe lucruri, cum ar fi decuparea textului în mijloc:
One thing led to another and… yada yada yada, that was that.Utilizați line-clamppe scurt
Putem obține aproape același lucru folosind line-clampstenograma pentru proprietăți block-overflowși max-lines.
După cum este definit în prezent, totuși, line-clampacceptă doar o singură valoare numerică max-linesși implicit se setează block-overflowla ellipsisvaloare. Deci, dacă doriți să utilizați un șir personalizat pentru trunchiere, atunci trebuie să mergeți cu forma lungă.
Suport pentru browser
Nimeni în acest moment, dar puteți obține asistență utilizând implementarea proprietară WebKit a line-clamp:
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Nu | 17 | 5 * |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 * | 85 * | 2.3 * | 5.0-5.1 * |