Preskočiť na obsah
TextArray1.87.0
100% lokálne

Generátor CSS line-clamp

Vygenerujte CSS pravidlo, ktoré skráti text na stanovený počet riadkov s elipsou alebo efektom zoslabenia.

Výstup
Súvisiace nástroje
Generátor CSS clamp()Vývojárske nástroje
Orezať textManipulácia textu
Generátor CSS text-shadownovéVývojárske nástroje
Porovnanie i18n kľúčovVývojárske nástroje
Konvertor TOML na JSONVývojárske nástroje
SQL na JSONVývojárske nástroje
Generátor CSS line-clamp
Názvy kariet, popisy produktov a náhľady komentárov — to všetko napokon potrebuje rovnaký trik: zobraziť niekoľko riadkov textu a čisté odskúsenie zvyšku bez toho, aby sa dlhý odstavec vylomil z rozloženia. Tento generátor vám napíše CSS pravidlo, pripravené na vloženie do štýlechu ako trieda ".line-clamp".
Vyberte si režim jedného riadku na odseknutie jedného riadku — klasická kombinácia "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" používaná na nadpisy a bunky tabuliek — alebo režim viacerých riadkov, ktorý používa "-webkit-line-clamp" na odskúsenie po toľko riadkoch, koľko nastavíte, a rešpektuje výšku riadku, ktorú zvolíte. Zapnite možnosť zoslabenia, aby sa posledný riadok mäkko spojil s pozadím pomocou gradientu namiesto tvrdej elipsy, čo lepšie pôsobí cez obrázok alebo farebnej karte. Možnosť náhrady pridáva blok "@supports", takže prehliadače bez podpory line-clamp stále dostanú rozumné odskúsenie max-height namiesto nekrátanenej steny textu, a možnosť Tailwind pripojí zodpovedajúcu triedu utility ("truncate" alebo "line-clamp-N") ako komentár, takže si ju nemusíte hľadať.
Zapíšte alebo vložte vetu do poľa náhľadu a nástroj odhaduje, ako by sa váš text rozdelil cez zvolený počet riadkov, aby ste si mohli skontrolovať počet riadkov pred commitment do dizajnu. Odhad je založený na priemernej dĺžke čitateľného riadku, nie na meraní skutočných fontov a kontajnerov — je to sprievodca na výber rozumného počtu riadkov, nie na pixel-presný render.
Všetko beží lokálne vo vašom prehliadači: CSS sa generuje, keď píšete, nič sa nenahrávalo nikde, a výsledok si môžete skopírovať, stiahnuť ako súbor .txt alebo poslať priamo do vstupu iného nástroja, aby ste pokračovali v práci.
Časté otázky
Aký je rozdiel medzi odseknutím jedného a viacerých riadkov?
Jeden riadok používa text-overflow: ellipsis s white-space: nowrap a funguje v každom prehliadači. Viac riadkov používa -webkit-line-clamp na odskúsenie po zvolený počet riadkov, čo potrebuje nastavenie display: -webkit-box, ktoré vygeneruje tento nástroj.
Prečo možnosť zoslabenia odstráni -webkit-line-clamp?
Gradient zoslabenia potrebuje pevnú max-height a umiestnený pseudo-element, nie box model line-clamp, takže nástroj prepína na pravidlo založené na max-height, kedykoľvek je zoslabenie zapnuté — pre režimy s jedným aj viacerými riadkami.
Potrebujem stále náhradu pre moderné prehliadače?
Všetky aktuálne hlavné prehliadače podporujú -webkit-line-clamp, takže náhrada primárne chráni staršie alebo neobvyklé prehliadače. Je bezpečné nechať zapnutú: platí len v bloku "@supports not", ktorý moderné prehliadače ignorujú.
Ako presný je náhľad?
Je to odhad založený na priemernej dĺžke riadku, nie na meraní vašich skutočných fontov alebo šírky kontajnera. Použite ho na posúdenie, či je váš zvolený počet riadkov správny, potom skontrolujte skutočný výsledok na vašej stránke.
Je môj náhľadový text niekde nahravaný?
Nie. CSS aj náhľad sa generujú celkom vo vašom prehliadači — nič, čo napíšete, sa neposielá na server.