Den line-clampejendom trunkaterne tekst på et bestemt antal linjer.
Specifikationen for det er i øjeblikket et redaktionelt udkast, så det betyder, at intet her er sat i sten, fordi det er et igangværende arbejde. Når det er sagt, er det defineret som en stenografi for, max-linesog block-overflowhvis førstnævnte er i fare for at blive droppet i kandidatanbefalingen.
Det er let at se, hvordan der max-linesville blive nixet, da dets funktion (indstilling af antallet af linjer før afkortning) allerede er bagt ind, line-clampog enhver yderligere abstraktion kan være unødvendig. Men det får os ud af sporet, så lad os gå videre.
Syntaks
.module ( line-clamp: (none | ); )line-clamp accepterer følgende værdier i det aktuelle udkast til spec:
none: indstiller intet maksimum for antallet af linjer, og der sker ingen trunkering som følge heraf.: indstiller det maksimale antal linjer, inden indholdet afkortes, og viser derefter en ellipsis (...) i slutningen af den sidste linje.
Denne ellipse skal gengives som et Unicode-tegn (U + 2026), men kunne erstattes af en ækvivalent baseret på indholdssproget og skrivemåden for den anvendte User-Agent.
Hej, kan jeg ikke gøre dette med tekstoverløb?
Ret spørgsmål, min ven, og svaret er, ja ...
(Se hvad jeg gjorde der?)
... sorta.
text-overflowhar faktisk en ellipsisværdi, der afskærer tekst:
.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )Se Pen-tekstoverløb af Geoff Graham (@geoffgraham) på CodePen.
Dejligt dejligt, det er en god start. Men hvad hvis vi ikke vil introducere ellipsen ikke på første linje, men et eller andet sted, siger den tredje tekstlinje?
Det er her, der line-clampkommer i spil. Bare bemærk, at en kombination af tre egenskaber bruges til at få det til at ske:
.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )Se Pen line-clamp (-webkit) af Geoff Graham (@geoffgraham) på CodePen.
Firefox understøtter dette nu, nøjagtigt på denne måde (med -webkit-præfikser og alle).
Så hvad er fangsten?
Fra og med nu er det browsersupport. Linjeklemmer er en del af CSS Overflow Module Level 3, som i øjeblikket er i Editor's Draft og totalt ikke understøttet i øjeblikket.
Vi kan få en linjespænding med et -webkit-præfiks (som underligt nok fungerer på tværs af alle større browsere). Faktisk er det sådan, at ovenstående demo blev udført.
Vi kan gå ned ad JavaScript-stien, hvis vi ønsker det. Clamp.js gør tricket:
Se Pen line-clamp (clamp.js) af Geoff Graham (@geoffgraham) på CodePen.
Browsersupport
Dette er understøttelsen af WebKits behørighed og udokumenterede implementering af linjeklemme.
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 * |