Svorka linky - Triky CSS | Almanach CSS 2025

line-clampVlastnictví zkrátí textu v určitém počtu řádků.

Specifikace pro něj je aktuálně redakční koncept, takže to znamená, že zde není nic vytesáno, protože se jedná o nedokončenou práci. To znamená, že je definován jako zkratka pro max-linesa block-overflowprvní z nich je označen jako riziko, že bude upuštěno v doporučení pro kandidáty.

Je snadné vidět, jak max-linesby to bylo nixováno, protože jeho funkce (nastavení počtu řádků před zkrácením) je již zapečená line-clampa další abstrakce nemusí být nutná. Ale to nás dostává mimo trať, tak pojďme dál.

Syntax

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

line-clamp přijímá v aktuálním konceptu specifikace následující hodnoty:

none: nenastaví maximální počet řádků a výsledkem nebude žádné zkrácení.
: nastaví maximální počet řádků před zkrácením obsahu a poté na konci posledního řádku zobrazí elipsu (…).

Tato elipsa by se měla vykreslit jako znak Unicode (U + 2026), ale mohla by být nahrazena ekvivalentem na základě použitého jazyka obsahu a režimu psaní User-Agent.

Hej, nemůžu to udělat s přetečením textu?

Spravedlivá otázka, příteli, a odpověď je, no ...

(Vidíš, co jsem tam udělal?)

… Sorta.

text-overflowskutečně má ellipsishodnotu, která zkrátí text:

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

Podívejte se na přetečení textu pera Geoffem Grahamem (@geoffgraham) na CodePen.

Hezké pěkné, to je dobrý začátek. Ale co když chceme představit elipsu ne na prvním řádku, ale někde, řekněme, na třetím řádku textu?

To je místo, kde line-clamppřichází do hry. Jen si všimněte, že se k tomu používá kombinace tří vlastností:

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

Podívejte se na Pen line-clamp (-webkit) od Geoffa Grahama (@geoffgraham) na CodePen.

Firefox to nyní podporuje, přesně tímto způsobem (s -webkit-předponami a všemi).

V čem je tedy háček?

Od této chvíle je to podpora prohlížeče. Svorky linky jsou součástí CSS Overflow Module Level 3, který je aktuálně v Draft editoru a v tuto chvíli je zcela nepodporovaný.

Můžeme získat nějakou akci upínání řádků s -webkit-předponou (která kupodivu funguje ve všech hlavních prohlížečích). Ve skutečnosti tak bylo provedeno výše uvedené demo.

Mohli bychom jít dolů cestou JavaScriptu, pokud bychom chtěli. Clamp.js udělá trik:

Podívejte se na Pen line-clamp (clamp.js) od Geoffa Grahama (@geoffgraham) na CodePen.

Podpora prohlížeče

Toto je podpora pro slušnost WebKit a nezdokumentovanou implementaci line clamp.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.