Linijska objemka - CSS-triki | Almanah CSS 2025

line-clampBesedilo lastnine skrajša na določeno število linij.

Specifikacija zanj je trenutno uredniški osnutek, tako da to pomeni, da tukaj ni nič zastavljeno, ker gre za delo v teku. Kljub temu je opredeljeno kot okrajšava za max-linesin block-overflow, za katero je v priporočilu za kandidate navedeno, da obstaja nevarnost, da bo opuščen.

Preprosto je videti, kako max-linesbi bilo niksirano, saj je njegova funkcija (nastavitev števila vrstic pred odsekanjem) že vpeta line-clampin morebitna nadaljnja abstrakcija morda ni potrebna. Ampak to nas spravi iz tira, zato gremo naprej.

Sintaksa

.module ( line-clamp: (none | ); )

line-clamp sprejema naslednje vrednosti v trenutnem osnutku specifikacije:

none: ne nastavi največjega števila vrstic in posledično ne bo prišlo do okrnitve.
: nastavi največje število vrstic pred skrajšanjem vsebine in nato na koncu zadnje vrstice prikaže elipso (...).

Ta elipsa bi se morala upodabljati kot znak Unicode (U + 2026), vendar bi jo lahko nadomestil enakovreden glede na uporabljeni jezik vsebine in način pisanja uporabniškega agenta.

Hej, ali tega ne morem storiti s prelivanjem besedila?

Pošteno vprašanje, prijatelj, in odgovor je, no ...

(Poglejte, kaj sem tam počel?)

... sorta.

text-overflowres ima ellipsisvrednost, ki bo okrnila besedilo:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Oglejte si prelivanje besedila Pen z Geoffom Grahamom (@geoffgraham) na CodePen.

Lepo lepo, to je dober začetek. Kaj pa, če želimo elipso predstaviti ne v prvi vrstici, ampak nekje, recimo v tretji vrstici besedila?

Tu line-clamppride do izraza. Upoštevajte le, da se za njegovo uporabo uporablja kombinacija treh lastnosti:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Glejte Pen-line clamp (-webkit) Geoff Graham (@geoffgraham) na CodePen.

Firefox to zdaj podpira, točno na ta način (s -webkit-predponami in vsem).

Torej, v čem je ulov?

Trenutno podpira brskalnik. Objemke vrvi so del modula CSS Overflow Level 3, ki je trenutno v Editor's Draft in trenutno trenutno ni podprt.

Lahko dobimo nekaj vpenjalnih vrstic s -webkit-predpono (ki je, čudno, deluje v vseh večjih brskalnikih). Pravzaprav je tako narejena zgornja predstavitev.

Če želimo, bi lahko šli po poti JavaScript. Clamp.js bo naredil trik:

Glejte Pen-line clamp (clamp.js) Geoff Graham (@geoffgraham) na CodePen.

Podpora za brskalnik

To je podpora za korektnost in nedokumentirano izvajanje linijske spone WebKit.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.