Tento článok poskytuje postup na uchytenie textu v Tailwinde.
Ako upnúť text na konkrétny počet riadkov?
Trieda upínania riadkov v Tailwinde obmedzuje obsah textu v bloku na konkrétny počet riadkov. Týmto spôsobom blok textu skryje text za počtom riadkov zadaným v triede. Môže sa použiť na webovej stránke, aby ukázal používateľovi, že existujú nejaké textové informácie, alebo skryje všetok nepotrebný text, aby sa zabránilo presýteniu webovej stránky.
Syntax
Nižšie uvedená syntax je uvedená v „ trieda ” atribút prvku na použitie zovretia čiary:
Vo vyššie definovanej syntaxi môže používateľ použiť čísla z „ 1 až 6 ” na použitie predvolených tried uchytenia čiar. Napríklad „ svorka-1 ” nedovolí, aby obsah textu presiahol jeden riadok.
Poďme pochopiť koncept triedy „line-camp“ prostredníctvom niekoľkých príkladov.
Príklad 1: Použite triedu uchytenia riadkov na obmedzenie obsahu na konkrétny počet riadkov
Obmedzme obsah textu na tri riadky pomocou triedy uchytenia riadkov v Tailwinde, ako je uvedené nižšie:
< div trieda = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >
< p trieda = 'svorka-3 w-72' > Toto je vzorový odsek. Bude viditeľný iba pre 3 riadky. Všetok obsah po ňom bude skrytý. Je to spôsobené triedou upínania vlasca v Tailwinde. < / p >
< / div >
Vysvetlenie vyššie uvedeného kódu je nasledovné:
- A “ div “ prvok je vytvorený so zaoblenými rohmi pomocou „ zaoblené-lg ' trieda. Poskytuje okraj a výplň pomocou „ m-{číslo} “ & “ p-{číslo} “triedy.
- Ďalej sa prvok v prvku div vycentruje pomocou „ justify-center „trieda a „ flex ” vytvorí kontajner, ktorý bude obsahovať podradený prvok div.
- ' bg-{color}-{number} ” nastavuje farbu pozadia prvku div.
- A “ Vytvorí sa značka ” obsahujúca textový obsah. Poskytuje sa pevná šírka pomocou „ w-{číslo} ' trieda.
- Nakoniec textový obsah „ p 'prvok je obmedzený na tri riadky pomocou ' linka-svorka-3 ' trieda.
Výkon
Vo výstupe je vidieť, že textový obsah, ktorý prekročil zadaný limit troch riadkov, je skrytý:
Príklad 2: Použite triedu zovretia čiary s predvolenými stavmi v Tailwinde
Tailwind poskytuje rôzne predvolené stavy pre prvok, ktoré možno použiť na zvýšenie dynamiky rozložení návrhu. Vývojár môže použiť akúkoľvek triedu Tailwind s týmito stavmi na poskytnutie špecifikovanej vlastnosti dizajnu prvku vždy, keď sa dosiahne tento stav. Podobne možno triedu „line-clamp“ použiť aj s týmito predvolenými stavmi Tailwind.
Syntax na použitie triedy „line-clamp“ so stavom v Tailwind je uvedená nižšie:
{ štát } : svorka- { číslo }Existujú tri predvolené stavy, ktoré sú opísané nasledovne:
- vznášať sa: Je to stav prvku, keď naň používateľ umiestni kurzor myši.
- zameranie: Je to stav, keď je prvok zaostrený. Používateľ napríklad prejde na prvok stlačením klávesu „tab“.
- aktívny: Stav, keď je prvok aktivovaný používateľom.
V nižšie uvedenej ukážke je všetko rovnaké ako v predchádzajúcom príklade. Jediný rozdiel je v tom, že trieda upínania vlasca je vybavená „ vznášať sa ' štát:
< div trieda = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< p trieda = 'hover:line-clamp-3 w-72' > Toto je vzorový odsek. Bude viditeľný iba pre 3 riadky. Všetok obsah po ňom bude skrytý. Je to spôsobené triedou upínania lana v Tailwinde. < / p >
< / div >
Všimnite si, že „ “ triedu poskytuje „ hover:line-clamp-3 ” trieda, ktorá obmedzí obsah textu na tri riadky vždy, keď používateľ umiestni kurzor myši na pole obsahu.
Výkon
Na výstupe nižšie je možné vidieť, že vlastnosť upnutia čiary sa použije, keď kurzor myši prejde nad blokom:
Príklad 3: Použite triedu zovretia čiary s bodmi prerušenia
Body prerušenia sú mediálne dopyty v Tailwinde, ktoré pomáhajú používateľom vytvoriť responzívne rozloženie návrhu. Tailwind poskytuje päť predvolených bodov prerušenia s vopred definovanými minimálnymi šírkami. Vývojár môže použiť aj triedu upnutia čiary s týmito bodmi zlomu.
Syntax na použitie triedy upínania riadkov s bodmi prerušenia je nasledovná:
{ predpony bodov zlomu } : svorka- { číslo }„Predpony bodov prerušenia“ uvedené vo vyššie uvedenej syntaxi sú nasledovné:
- sm: Tento bod prerušenia má minimálnu šírku 640 pixelov.
- md: Tento bod prerušenia má minimálnu šírku 768 pixelov.
- lg: Tento bod prerušenia má minimálnu šírku 1024 pixelov.
- xl: Tento bod prerušenia má minimálnu šírku 1280 pixelov.
- 2xl: Tento bod prerušenia má minimálnu šírku 1536 pixelov.
V nižšie uvedenej ukážke „ p ” prvok je vybavený rôznymi triedami uchytenia čiary na rôznych prerušovacích bodoch. Toto zmení vlastnosť zovretia riadku textového bloku vždy, keď sa dosiahne nový bod prerušenia:
< div trieda = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< p trieda = 'svorka-1 lg:svorka-3 md:svorka-2 sm:svorka-1 w-72' > Toto je vzorový odsek. Bude viditeľný iba pre 3 riadky. Všetok obsah po ňom bude skrytý. Je to spôsobené triedou upínania lana v Tailwinde. < / p >
< / div >
Prvok p je štandardne vybavený triedou „line-clamp-1“. Textový obsah v prvku „p“ však bude obmedzený na jeden riadok pre „ sm 'bod prerušenia, dva riadky pre ' md 'prerušovací bod a tri riadky pre ' lg “bod zlomu.
Výkon
Z výstupu je zrejmé, že vlastnosť line-clamp textového bloku sa mení so zmenou veľkosti obrazovky:
Ukázali sme postup prichytenia textu na konkrétny počet riadkov v Tailwinde.
Záver
Trieda svorky riadkov v Tailwind obmedzuje textový obsah prvku na zadaný počet riadkov. Trieda „lin-clamp-{číslo}“ sa používa ako syntax na uchytenie textu do obmedzených riadkov. Triedu svorky čiary možno použiť s preddefinovanými bodmi prerušenia a variantmi stavu v Tailwinde. Tento článok poskytuje postup na upnutie textu na určený počet riadkov.