Tento článek poskytuje postup pro upnutí textu v Tailwindu.
Jak upnout text na určitý počet řádků?
Třída upínání řádků v Tailwind omezuje obsah textu v bloku na konkrétní počet řádků. Tímto způsobem textový blok skryje text za počtem řádků zadaným ve třídě. Lze jej použít na webové stránce, aby uživateli ukázal, že existují nějaké textové informace, nebo skryje veškerý nepotřebný text, aby se zabránilo přesycení webové stránky.
Syntax
Níže uvedená syntaxe je uvedena v „ třída ” atribut prvku pro použití uchycení čáry:
Ve výše definované syntaxi může uživatel použít čísla z „ 1 až 6 ” pro použití výchozích tříd uchycení čar. Například „ svorka-1 ” nedovolí, aby obsah textu přesáhl jeden řádek.
Pojďme pochopit koncept třídy „line-camp“ na několika příkladech.
Příklad 1: Použijte třídu sevření čar k omezení obsahu na určitý počet řádků
Omezme obsah textu na tři řádky pomocí třídy uchycení čar v Tailwindu, jak je uvedeno níže:
< div třída = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >
< p třída = 'line-clamp-3 w-72' > Toto je ukázkový odstavec. Bude vidět pouze na 3 řádcích. Veškerý obsah poté bude skrytý. To je způsobeno třídou upnutí vlasce v Tailwindu. < / p >
< / div >
Vysvětlení výše uvedeného kódu je následující:
- A ' div “ prvek se vytvoří se zaoblenými rohy pomocí „ zaoblené-lg “třída. Poskytuje okraj a výplň pomocí „ m-{číslo} “ & “ p-{číslo} ' třídy.
- Dále je prvek v prvku div vycentrován pomocí „ justify-center „třída a „ flex ” vytvoří kontejner, který bude obsahovat podřízený prvek div.
- ' bg-{barva}-{číslo} Třída ” nastavuje barvu pozadí prvku div.
- A ' Vytvoří se značka ” obsahující textový obsah. Poskytuje pevnou šířku pomocí „ w-{číslo} “třída.
- Nakonec textový obsah „ p “ prvek je omezen na tři řádky pomocí “ linka-svorka-3 “třída.
Výstup
Na výstupu je vidět, že textový obsah, který překročil zadaný limit tří řádků, je skrytý:
Příklad 2: Použijte třídu Clamp Line s výchozími stavy v Tailwind
Tailwind poskytuje různé výchozí stavy pro prvek, které lze použít k dynamičtějšímu rozvržení návrhu. Vývojář může použít libovolnou třídu Tailwind s těmito stavy k poskytnutí zadané vlastnosti návrhu prvku, kdykoli je tohoto stavu dosaženo. Podobně lze třídu „line-clamp“ použít také s těmito výchozími stavy Tailwind.
Syntaxe pro použití třídy „line-clamp“ se stavem v Tailwind je uvedena níže:
{ Stát } : svorka- { číslo }Existují tři výchozí stavy, které jsou popsány následovně:
- vznášet se: Je to stav prvku, když na něj uživatel najede kurzorem myši.
- soustředit se: Je to stav, kdy je prvek zaostřený. Uživatel například přejde na prvek stisknutím klávesy „tab“.
- aktivní: Stav, kdy je prvek aktivován uživatelem.
V níže uvedené ukázce je vše shodné s předchozím příkladem. Jediný rozdíl je v tom, že třída upínání čar je vybavena „ vznášet se ' Stát:
< div třída = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< p třída = 'hover:line-clamp-3 w-72' > Toto je ukázkový odstavec. Bude vidět pouze na 3 řádcích. Veškerý obsah poté bude skrytý. To je způsobeno třídou upnutí lanka v Tailwindu. < / p >
< / div >
Všimněte si, že „ “ třídu poskytuje „ hover:line-clamp-3 ”, která omezí obsah textu na tři řádky, kdykoli uživatel najede kurzorem myši na pole obsahu.
Výstup
Na níže uvedeném výstupu je vidět, že vlastnost upnutí čáry se použije, když kurzor myši najede na blok:
Příklad 3: Použijte třídu svorky čáry s body přerušení
Body přerušení jsou dotazy na média ve službě Tailwind, které uživatelům pomáhají vytvořit responzivní rozvržení návrhu. Tailwind poskytuje pět výchozích bodů přerušení s předdefinovanými minimálními šířkami. Vývojář může také použít třídu upnutí čáry s těmito body přerušení.
Syntaxe pro použití třídy upínání řádků s body přerušení je následující:
{ předpony bodů přerušení } : svorka- { číslo }„Předpony bodů přerušení“ uvedené ve výše uvedené syntaxi jsou následující:
- sm: Tento bod přerušení má minimální šířku 640 pixelů.
- md: Tento bod přerušení má minimální šířku 768 pixelů.
- lg: Tento bod přerušení má minimální šířku 1024 pixelů.
- xl: Tento bod přerušení má minimální šířku 1280px.
- 2xl: Tento bod přerušení má minimální šířku 1536 pixelů.
V níže uvedené ukázce „ p ” prvek je vybaven různými třídami uchycení čar na různých bodech přerušení. Tím se změní vlastnost line-clamping textového bloku, kdykoli je dosaženo nového bodu přerušení:
< div třída = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< p třída = 'svorka-1 lg:svorka-3 md:svorka-2 sm:svorka-1 w-72' > Toto je ukázkový odstavec. Bude vidět pouze na 3 řádcích. Veškerý obsah poté bude skrytý. To je způsobeno třídou upnutí lanka v Tailwindu. < / p >
< / div >
Prvek p je standardně vybaven třídou „line-clamp-1“. Textový obsah v prvku „p“ však bude omezen na jeden řádek pro „ sm 'breakpoint, dva řádky pro ' md bod přerušení a tři řádky pro lg “bod zlomu.
Výstup
Z výstupu je zřejmé, že vlastnost line-clamp textového bloku se mění se změnou velikosti obrazovky:
Ukázali jsme postup přichycení textu na konkrétní počet řádků v Tailwindu.
Závěr
Třída sevření řádku v Tailwind omezuje textový obsah prvku na zadaný počet řádků. Třída „lin-clamp-{číslo}“ se používá jako syntaxe pro sevření textu na omezené řádky. Třídu svorky čáry lze použít s předdefinovanými body přerušení a variantami stavu v Tailwindu. Tento článek poskytuje postup pro upnutí textu na zadaný počet řádků.