Den line-clamp
fastighets trunkat text vid ett visst antal linjer.
Specifikationen för den är för närvarande ett redaktörsutkast, så det betyder att inget här är i sten eftersom det är ett pågående arbete. Med det sagt definieras det som en förkortning för max-lines
och block-overflow
den förra noteras som risk för att tappas i kandidatrekommendationen.
Det är lätt att se hur det max-lines
skulle vara nixat eftersom dess funktion (ställa in antalet rader innan trunkering) redan är bakad line-clamp
och eventuell ytterligare abstraktion kan vara onödig. Men det gör oss av spår, så låt oss gå vidare.
Syntax
.module ( line-clamp: (none | ); )
line-clamp
accepterar följande värden i det aktuella utkastet till specifikationen:
none
: anger inget maximum för antalet rader och ingen trunkering kommer att ske som ett resultat.: ställer in maximalt antal rader innan innehållet trunkeras och visar sedan en ellips (...) i slutet av den sista raden.
Den ellipsen ska återges som ett Unicode-tecken (U + 2026) men kan ersättas med en motsvarighet baserat på innehållsspråket och skrivläget för den användaragent som används.
Hej, kan jag inte göra detta med text-overflow?
Rätt fråga, min vän, och svaret är, ja ...
(Se vad jag gjorde där?)
... sorta.
text-overflow
har verkligen ett ellipsis
värde som avkortar text:
.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )
Se Pen-text-överflödet av Geoff Graham (@geoffgraham) på CodePen.
Trevligt trevligt, det är en bra start. Men vad händer om vi vill införa ellipsen inte på första raden utan någonstans, säg, den tredje textraden?
Det är där som line-clamp
spelar in. Observera att en kombination av tre egenskaper används för att få det att hända:
.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )
Se Pen line-clamp (-webkit) av Geoff Graham (@geoffgraham) på CodePen.
Firefox stöder detta nu, exakt så (med -webkit-
prefixen och allt).
Så, vad är fångsten?
Från och med nu är det webbläsarsupport. Linjeklämmor är en del av CSS Overflow Module Level 3 som för närvarande finns i Editor's Draft och helt stöds för tillfället.
Vi kan få en radklämning med ett -webkit-
prefix (som konstigt nog fungerar i alla större webbläsare). Faktum är att det var så demo ovan gjordes.
Vi kan gå ner på JavaScript-sökvägen om vi vill. Clamp.js kommer att göra tricket:
Se Pen line-clamp (clamp.js) av Geoff Graham (@geoffgraham) på CodePen.
Webbläsarstöd
Detta är stödet för WebKits riktighet och odokumenterade implementering av linjeklämma.
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
Krom | Firefox | IE | Kant | Safari |
---|---|---|---|---|
14 * | 68 * | Nej | 17 | 5 * |
Mobil / surfplatta
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 * | 85 * | 2,3 * | 5,0-5,1 * |