Svorka na vedenie - Triky CSS | Almanach CSS 2025

line-clampVlastníctvo skráti textu v určitom počte riadkov.

Jeho špecifikáciou je momentálne editorský návrh, takže to znamená, že tu nie je nič vytesané, pretože sa jedná o rozpracované dielo. To znamená, že je definovaný ako skratka pre max-linesa block-overflowprvý z nich je označený ako rizikový odpad v kandidátskom odporúčaní.

Je ľahké pochopiť, ako max-linesby sa to dalo nixovať, pretože jeho funkcia (nastavenie počtu riadkov pred skrátením) je už napečená line-clampa ďalšie abstrakcie by mohli byť zbytočné. Ale to nás dostáva z cesty, tak poďme ďalej.

Syntax

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

line-clamp akceptuje v aktuálnom koncepte špecifikácie nasledujúce hodnoty:

none: nenastaví maximálny počet riadkov a v dôsledku toho sa neskráti.
: nastaví maximálny počet riadkov pred skrátením obsahu a potom na konci posledného riadku zobrazí elipsu (...).

Táto elipsa by sa mala vykresľovať ako znak Unicode (U + 2026), ale mohla by byť nahradená ekvivalentom na základe použitého jazyka obsahu a režimu písania používaného agenta.

Hej, nemôžem to urobiť s pretečením textu?

Spravodlivá otázka, priateľu, a odpoveď je, dobre ...

(Vidíš, čo som tam urobil?)

... sorta.

text-overflowskutočne má ellipsishodnotu, ktorá skráti text:

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

Prezrite si pretečenie textu pera od Geoffa Grahama (@geoffgraham) na CodePen.

Pekné pekné, to je dobrý začiatok. Čo však v prípade, že chceme predstaviť elipsu nie na prvom riadku, ale niekde, povedzme, v treťom riadku textu?

Tam line-clampvstupuje do hry. Len nezabudnite, že sa na to používa kombinácia troch vlastností:

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

Pozrite si svorku pera (-webkit) od Geoffa Grahama (@geoffgraham) na CodePen.

Firefox to teraz podporuje presne týmto spôsobom (s -webkit-predponami a všetkými).

V čom je teda háčik?

Od tejto chvíle je to podpora prehľadávača. Svorky na vedenie sú súčasťou modulu CSS Overflow Module úrovne 3, ktorý je momentálne v koncepte editora a momentálne je úplne nepodporovaný.

Môžeme získať akciu na upnutie riadku s -webkit-predponou (ktorá, napodiv, funguje vo všetkých hlavných prehliadačoch). Takto sa vlastne robilo vyššie uvedené demo.

Ak by sme chceli, mohli by sme ísť dole po ceste JavaScriptu. Clamp.js urobí trik:

Prezrite si Pen line-clamp (clamp.js) od Geoffa Grahama (@geoffgraham) na CodePen.

Podpora prehľadávača

Toto je podpora pre slušnosť WebKit a nezdokumentovanú implementáciu svorky linky.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.