Selles artiklis kirjeldatakse teksti tagatuules kinnitamise protseduuri.
Kuidas kinnitada teksti kindlale arvule ridadele?
Tailwindi joonte sulgemise klass piirab ploki teksti sisu teatud arvu ridadega. Seda tehes peidab tekstiplokk teksti pärast klassis määratud ridade arvu. Seda saab kasutada veebilehel, et näidata kasutajale, et seal on tekstiteavet, või peita kogu ebavajalik tekst, et vältida veebilehe küllastumist.
Süntaks
Allpool antud süntaks on esitatud ' klass ” elemendi atribuut jooneklambri rakendamiseks:
Ülalmääratletud süntaksis saab kasutaja kasutada numbreid 1 kuni 6 ” vaikimisi joonekinnitusklasside kasutamiseks. Näiteks ' joon-klamber-1 ” klass ei lase teksti sisul üle ühe rea.
Mõistame 'liinilaagri' klassi mõistet mõne näite kaudu.
Näide 1: Kasutage jooneklambri klassi, et piirata sisu kindla arvu ridadega
Piirame teksti sisu kolme reaga, kasutades Tailwindi reaklambri klassi, nagu on tehtud allpool:
< div klass = ' ümardatud-lg flex justify-center bg-slate-200 m-5 p-4' >
< lk klass = ' line-clamp-3 w-72' > See on näidislõik. See on nähtav ainult 3 rida. Kogu sisu pärast seda peidetakse. See on tingitud Tailwindis liini kinnitusklassist. < / lk >
< / div >
Ülaltoodud koodi selgitus on järgmine:
- A ' div ' element luuakse ümarate nurkadega, kasutades ' ümardatud-lg ” klass. See pakub veerise ja polstri, kasutades ' m-{number} ' & ' p-{number} ” klassid.
- Järgmisena tsentreeritakse element div-elemendis, kasutades ' õigusta-keskus ” klass ja „ painduv ” klass loob konteineri, mis sisaldab div alamelementi.
- ' bg-{color}-{number} ” klass määrab div elemendi taustavärvi.
- A ' ” luuakse teksti sisu sisaldav silt. See on tagatud fikseeritud laiusega, kasutades ' w-{number} ” klass.
- Lõpuks, teksti sisu lk ' element on piiratud kolme reaga, kasutades ' joon-klamber-3 ” klass.
Väljund
Väljundis on näha, et tekstisisu, mis ületas määratud kolme rea piiri, on peidetud:
Näide 2: Kasutage Tailtuules liiniklambri klassi vaikeolekutega
Tailwind pakub elemendile erinevaid vaikeolekuid, mida saab kasutada kujunduspaigutuste dünaamilisemaks muutmiseks. Arendaja saab nende olekutega kasutada mis tahes Tailwindi klassi, et anda elemendile määratud kujundusomadus, kui see olek on saavutatud. Samamoodi saab nende Tailwindi vaikeolekutega kasutada ka klassi 'line-clamp'.
Allpool on toodud Tailwindi olekuga klassi „line-clamp” süntaks:
{ olek } : jooneklamber- { number }On kolm vaikeolekut, mida kirjeldatakse järgmiselt.
- hõljuma: See on elemendi olek, kui kasutaja viib hiirekursori selle kohale.
- fookus: See on olek, mil element on fookuses. Näiteks navigeerib kasutaja elemendi juurde, vajutades klahvi 'tab'.
- aktiivne: Olek, mil kasutaja on elemendi aktiveerinud.
Allolevas demonstratsioonis on kõik identne eelmise näitega. Ainus erinevus on see, et joone kinnitusklass on varustatud ' hõljuma ” olek:
< div klass = ' ümardatud-lg flex justify-center bg-slate-200 m-5 p-4' >< lk klass = 'hover:line-clamp-3 w-72' > See on näidislõik. See on nähtav ainult 3 rida. Kogu sisu pärast seda peidetakse. See on tingitud Tailwindis kasutatavast lintide kinnitusklassist. < / lk >
< / div >
Pange tähele, et ' ” klassi pakub „ hover: line-clamp-3 ” klassi, mis piirab teksti sisu kolme reaga alati, kui kasutaja viib hiirekursori sisukasti kohale.
Väljund
Allolevast väljundist on näha, et jooneklambri omadus rakendub siis, kui hiirekursor hõljub ploki kohal:
Näide 3: Kasutage katkestuspunktidega jooneklambri klassi
Katkestuspunktid on Tailwindis meediumipäringud, mis aitavad kasutajatel luua tundliku kujunduspaigutuse. Tailwind pakub viit vaikemurdepunkti eelmääratletud minimaalse laiusega. Nende katkestuspunktidega saab arendaja kasutada ka joone kinnitusklassi.
Katkestuspunktidega jooneklambriklassi kasutamise süntaks on järgmine:
{ murdepunkti eesliited } : jooneklamber- { number }Ülaltoodud süntaksis mainitud 'murdepunkti eesliited' on järgmised:
- sm: Selle murdepunkti minimaalne laius on 640 pikslit.
- md: Selle murdepunkti minimaalne laius on 768 pikslit.
- lg: Selle murdepunkti minimaalne laius on 1024 pikslit.
- xl: Selle murdepunkti minimaalne laius on 1280 pikslit.
- 2xl: Selle murdepunkti minimaalne laius on 1536 pikslit.
Allpool esitatud esitluses „ lk ” element on varustatud erinevate joonklambriklassidega erinevatel katkestuspunktidel. See muudab tekstiploki rea sulgemise omadust iga kord, kui jõutakse uue katkestuspunktini:
< div klass = ' ümardatud-lg flex justify-center bg-slate-200 m-5 p-4' >< lk klass = ' line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > See on näidislõik. See on nähtav ainult 3 rida. Kogu sisu pärast seda peidetakse. See on tingitud Tailwindis kasutatavast lintide kinnitusklassist. < / lk >
< / div >
Element p on vaikimisi varustatud klassiga 'line-clamp-1'. Kuid elemendi „p” tekstisisu on piiratud ühe reaga sm ” murdepunkt, kaks rida md ” murdepunkt ja kolm rida lg ” murdepunkt.
Väljund
Väljundist on selge, et tekstiploki line-clamp omadus muutub ekraani suuruse muutudes:
Oleme demonstreerinud Tailwindis teksti kindla arvu ridade kinnitamise protseduuri.
Järeldus
Tailwindi jooneklambri klass piirab elemendi tekstisisu määratud arvu ridadega. Klassi 'lin-clamp-{number}' kasutatakse süntaksina teksti piiramiseks piiratud ridadele. Jooneklambri klassi saab kasutada Tailwindis etteantud katkestuspunktide ja olekuvariantidega. See artikkel pakub protseduuri teksti kindla arvu ridade külge kinnitamiseks.