Tämä artikkeli sisältää menettelyn tekstin kiinnittämiseksi myötätuulessa.
Kuinka kiinnittää teksti tiettyyn rivimäärään?
Tailwindin rivinkiristysluokka rajoittaa lohkon tekstisisällön tiettyyn määrään rivejä. Näin tekstilohko piilottaa tekstin luokassa määritetyn rivimäärän jälkeen. Sitä voidaan käyttää verkkosivulla näyttämään käyttäjälle, että siellä on tekstitietoja, tai piilottaa kaikki tarpeeton teksti verkkosivun kyllästymisen välttämiseksi.
Syntaksi
Alla annettu syntaksi löytyy ' luokkaa ” elementin attribuutti linjan kiristyksen käyttämiseksi:
Yllä määritellyssä syntaksissa käyttäjä voi käyttää numeroita ' 1-6 ” oletuslinjan kiinnitysluokkien käyttämiseen. Esimerkiksi ' line-clamp-1 ” luokka ei anna tekstisisällön ylittää yhtä riviä.
Ymmärretään 'line-camp' -luokan käsite muutamien esimerkkien kautta.
Esimerkki 1: Käytä Line Clamp Class -luokkaa rajoittaaksesi sisällön tiettyyn määrään rivejä
Rajataan tekstin sisältö kolmeen riviin käyttämällä Tailwindin rivinkiristysluokkaa, kuten alla:
< div luokkaa = ' pyöristetty-lg flex justify-center bg-slate-200 m-5 p-4' >
< s luokkaa = ' line-clamp-3 w-72' > Tämä on esimerkkikappale. Se näkyy vain 3 riviä. Kaikki sen jälkeen oleva sisältö piilotetaan. Tämä johtuu Tailwindin siiman kiristysluokasta. < / s >
< / div >
Yllä olevan koodin selitys on seuraava:
- A ' div ' -elementti luodaan pyöristetyillä kulmilla käyttämällä ' pyöristetty-lg ”luokka. Se tarjoaa marginaalin ja täytteen käyttämällä ' m-{numero} ' & ' p-{numero} ' luokat.
- Seuraavaksi div-elementin elementti keskitetään käyttämällä ' tasauskeskus 'luokka ja ' flex ” luokka luo säilön, joka sisältää div:n alielementin.
- ' bg-{väri}-{numero} ” luokka asettaa div-elementin taustavärin.
- A ' ' -tunniste luodaan, joka sisältää tekstisisällön. Se tarjotaan kiinteän leveyden käyttämällä ' w-{number} ”luokka.
- Lopuksi tekstin ' s ' -elementti on rajoitettu kolmeen riviin käyttämällä ' line-clamp-3 ”luokka.
Lähtö
Tulosteessa näkyy, että tekstisisältö, joka ylitti määritetyn kolmen rivin rajan, on piilotettu:
Esimerkki 2: Käytä linjakiristysluokkaa oletustiloilla myötätuulessa
Tailwind tarjoaa elementille erilaisia oletustiloja, joiden avulla suunnittelun asettelut voidaan tehdä dynaamisemmiksi. Kehittäjä voi käyttää mitä tahansa Tailwind-luokkaa näillä tiloilla antaakseen elementille määritetyn suunnitteluominaisuuden aina, kun tämä tila saavutetaan. Samoin 'line-clamp' -luokkaa voidaan käyttää myös näiden oletusarvoisten myötätuulen tilojen kanssa.
Syntaksi 'line-clamp'-luokan käyttämiselle Tailwind-tilan kanssa on annettu alla:
{ osavaltio } : linjakiinnike- { määrä }On kolme oletustilaa, jotka kuvataan seuraavasti:
- hover: Se on elementin tila, kun käyttäjä vie hiiren osoittimen sen päälle.
- keskittyä: Se on tila, jossa elementti on fokusoituna. Esimerkiksi käyttäjä siirtyy elementtiin painamalla sarkainnäppäintä.
- aktiivinen: Tila, jolloin käyttäjä aktivoi elementin.
Alla olevassa esityksessä kaikki on identtistä edellisen esimerkin kanssa. Ainoa ero on, että linjan kiristysluokka on varustettu ' leijuu ”tila:
< div luokkaa = ' pyöristetty-lg flex justify-center bg-slate-200 m-5 p-4' >< s luokkaa = 'hover:line-clamp-3 w-72' > Tämä on esimerkkikappale. Se näkyy vain 3 riviä. Kaikki sen jälkeen oleva sisältö piilotetaan. Tämä johtuu Tailwindin lin-kiinnitysluokasta. < / s >
< / div >
Huomaa, että ' 'luokan tarjoaa ' hover:line-clamp-3 ”-luokka, joka rajoittaa tekstisisällön kolmeen riviin aina, kun käyttäjä vie hiiren osoittimen sisältöruudun päälle.
Lähtö
Alla olevasta lähdöstä voidaan nähdä, että rivin kiinnitysominaisuutta käytetään, kun hiiren osoitin liikkuu lohkon päällä:
Esimerkki 3: Käytä viivakiristysluokkaa katkaisupisteiden kanssa
Katkopisteet ovat Tailwindin mediakyselyitä, jotka auttavat käyttäjiä luomaan reagoivan suunnitteluasettelun. Tailwind tarjoaa viisi oletuskatkaisupistettä ennalta määritetyillä vähimmäisleveydillä. Kehittäjä voi myös käyttää linjankiinnitysluokkaa näillä katkaisupisteillä.
Syntaksi viivankiinnitysluokan käyttämiselle katkaisupisteillä on seuraava:
{ keskeytyspisteen etuliitteet } : linjakiinnike- { määrä }Yllä olevassa syntaksissa mainitut 'katkaisupisteen etuliitteet' ovat seuraavat:
- sm: Tämän keskeytyskohdan vähimmäisleveys on 640 kuvapistettä.
- md: Tämän keskeytyskohdan vähimmäisleveys on 768 kuvapistettä.
- lg: Tämän keskeytyskohdan vähimmäisleveys on 1024 kuvapistettä.
- xl: Tämän keskeytyskohdan vähimmäisleveys on 1 280 kuvapistettä.
- 2xl: Tämän keskeytyskohdan vähimmäisleveys on 1 536 kuvapistettä.
Alla olevassa esittelyssä ' s ”-elementti on varustettu eri linjakiinnitysluokilla eri katkaisupisteissä. Tämä muuttaa tekstilohkon rivinsulkuominaisuutta aina, kun uusi keskeytyskohta saavutetaan:
< div luokkaa = ' pyöristetty-lg flex justify-center bg-slate-200 m-5 p-4' >< s luokkaa = ' line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Tämä on esimerkkikappale. Se näkyy vain 3 riviä. Kaikki sen jälkeen oleva sisältö piilotetaan. Tämä johtuu Tailwindin lin-kiinnitysluokasta. < / s >
< / div >
Elementille p on oletusarvoisesti 'line-clamp-1'-luokka. 'p'-elementin tekstisisältö on kuitenkin rajoitettu yhteen riviin ' sm ”katkoskohta, kaksi riviä ” md ” keskeytyskohta ja kolme riviä ” lg ”katkospiste.
Lähtö
Tulosteesta on selvää, että tekstilohkon rivinkiristysominaisuus muuttuu näytön koon muuttuessa:
Olemme osoittaneet menettelyn tekstin kiinnittämiseksi tiettyyn määrään rivejä Tailwindissä.
Johtopäätös
Tailwindin viivankiristysluokka rajoittaa elementin tekstisisällön määritettyyn määrään rivejä. Luokkaa 'lin-clamp-{number}' käytetään syntaksina tekstin kiinnittämiseen rajoitetuille riveille. Viivankiristysluokkaa voidaan käyttää ennalta määritettyjen keskeytyspisteiden ja tilamuunnelmien kanssa Tailwindissä. Tämä artikkeli on tarjonnut menettelyn tekstin kiinnittämiseksi tiettyyn määrään rivejä.