Generátor CSS line-clamp
Vygenerujte CSS pravidlo, které zkrátí text na daný počet řádků s elipsou nebo efektem slábnutí.
Generátor CSS line-clamp
Nadpisy karet, popisy produktů a náhledy komentářů — nakonec to všechno potřebuje stejný trik: zobrazit pár řádků textu a čistě jej ukončit, místo aby dlouhý odstavec prolomil rozložení. Tento generátor vám napíše CSS pravidlo, připravené na vložení do stylů jako třída ".line-clamp".
Vyberte si režim jednoho řádku pro zkrácení jednoho řádku — klasická kombinace "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" používaná pro nadpisy a buňky tabulek — nebo režim více řádků, který používá "-webkit-line-clamp" ke zkrácení po zvolený počet řádků, přitom respektuje výšku řádku, kterou nastavíte. Zapněte možnost slábnutí, aby se poslední řádek mekce prolnul s pozadím pomocí gradientu místo tvrdé elipsy, což lépe vypadá přes obrázek či barevnou kartu. Možnost záloh přidá blok "@supports", takže prohlížeče bez podpory line-clamp stále dostanou rozumné zkrácení max-height místo neskráceného řádku textu, a možnost Tailwind připojí odpovídající třídu utility ("truncate" nebo "line-clamp-N") jako komentář, abyste si ji nemuseli vyhledávat.
Napište nebo vložte větu do pole náhledu a nástroj odhaduje, jak by se váš text zalomil přes zvolený počet řádků, abyste si mohli ověřit počet řádků před potvrzením designu. Odhad je založen na průměrné délce čitelného řádku, nikoli na měření skutečných fontů a kontejnerů — je to příručka pro výběr rozumného počtu řádků, nikoli pixelově přesné vykreslení.
Všechno běží lokálně ve vašem prohlížeči: CSS se generuje, jak píšete, nic se nikam neposílá, a výsledek si můžete zkopírovat, stáhnout jako soubor .txt nebo poslat přímo do vstupu jiného nástroje, aby jste pokračoval v práci.