Linjeklämma - CSS-tricks

Anonim

Den line-clampfastighets 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-linesoch block-overflowden förra noteras som risk för att tappas i kandidatrekommendationen.

Det är lätt att se hur det max-linesskulle vara nixat eftersom dess funktion (ställa in antalet rader innan trunkering) redan är bakad line-clampoch 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-overflowhar verkligen ett ellipsisvä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-clampspelar 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 *