Den block-overflowegenskab afkorter tekst og angiver mere indhold følger ved at indsætte en ellipse eller brugerdefineret streng efter et antal linjer, der er fastsat af max-linesejendommen.
Ejendommen er blevet introduceret i Editorens udkast til CSS Overflow Module niveau 3 specifikation. Det betyder, at det er eksperimentelt i øjeblikket og betragtes som et igangværende arbejde. Faktisk kan du følge samtalen, der inkluderer snak om at omdøbe ejendommen helt.
Syntaks
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow accepterer følgende værdier:
clip: Indsætter ikke et tegn for at angive mere tekst, der skal følges. I stedet for er indholdet kun afkortet og afskåret ved det sidste tegn.ellipsis: Viser en ellipse (...) i slutningen af den sidste linje. Det skal gengives som et Unicode-tegn (U + 2026), men kan erstattes af et ækvivalent baseret på indholdssproget og skrivemåden for den brugeragent, der bruges.: Viser brugerdefineret tekst (f.eks. "Læs mere →") i slutningen af den sidste linje. Specifikationen siger, at User-Agent kan erstatte strengen med en ellipse, hvis strengen er "absurd" lang.
Igen er alt dette eksperimentelt igangværende arbejde. Disse værdier kan ændre sig. Eller mere kan tilføjes. For eksempel har der været opfordringer til en "smartere" ellips, der muligvis er i stand til at udføre flere ting, som f.eks. At beskære tekst i midten:
One thing led to another and… yada yada yada, that was that.Brug line-clampkort
Vi kan få næsten de samme ting ved hjælp line-clampsom er en forkortelse for den block-overflowog max-linesegenskaber.
Som det i øjeblikket er defineret, line-clampaccepterer det dog kun en enkelt numerisk værdi for max-linesog indstilles implicit block-overflowtil ellipsisværdien. Så hvis du vil bruge en brugerdefineret streng til trunkering, skal du gå med den lange form i stedet.
Browsersupport
Ingen i øjeblikket, men du kan få support ved hjælp af WebKits proprietære implementering af line-clamp:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Ingen | 17 | 5 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |