De block-overfloweigenschap kapt tekst af en geeft aan dat er meer inhoud volgt door een weglatingsteken of een aangepaste tekenreeks in te voegen na een aantal regels dat is ingesteld door de max-lineseigenschap.
De eigenschap is geïntroduceerd in de Editor's Draft van de CSS Overflow Module Level 3-specificatie. Dat betekent dat het op dit moment experimenteel is en als een work in progress wordt beschouwd. In feite kunt u het gesprek volgen, inclusief geklets over het helemaal hernoemen van de eigenschap.
Syntaxis
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow accepteert de volgende waarden:
clip: Voegt geen teken in om aan te geven dat er nog meer tekst moet volgen. In plaats daarvan wordt de inhoud alleen afgekapt en afgesneden bij het laatste teken.ellipsis: Geeft een weglatingsteken (…) weer aan het einde van de laatste regel. Het moet worden weergegeven als een Unicode-teken (U + 2026) maar kan worden vervangen door een equivalent op basis van de inhoudstaal en schrijfmodus van de gebruikte User-Agent.: Toont aangepaste tekst (bijv. "Lees meer →") aan het einde van de laatste regel. De specificatie zegt dat de User-Agent de string kan vervangen door een ellips als de string "absurd" lang is.
Nogmaals, dit is allemaal experimenteel werk in uitvoering. Deze waarden kunnen veranderen. Of er kunnen er meer worden toegevoegd. Er zijn bijvoorbeeld verzoeken om een 'slimmere' weglatingsteken die mogelijk meer dingen kan doen, zoals tekst in het midden bijsnijden:
One thing led to another and… yada yada yada, that was that.Gebruik line-clampin het kort
We kunnen ongeveer hetzelfde krijgen met line-clampwat een afkorting is voor de block-overflowen max-lineseigenschappen.
Zoals het momenteel is gedefinieerd, line-clampaccepteert het echter slechts één numerieke waarde voor max-linesen wordt deze impliciet ingesteld block-overflowop de ellipsiswaarde. Dus als u een aangepaste tekenreeks voor afkapping wilt gebruiken, moet u in plaats daarvan de lange vorm gebruiken.
Browser-ondersteuning
Momenteel geen, maar u kunt enige ondersteuning krijgen met behulp van de eigen implementatie van WebKit van line-clamp:
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Nee | 17 | 5 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5.0-5.1 * |