Ta članek opisuje postopek za vpenjanje besedila v zadnji veter.
Kako vpeti besedilo v določeno število vrstic?
Razred vpenjanja vrstic v Tailwindu omeji vsebino besedila v bloku na določeno število vrstic. S tem bo besedilni blok skril besedilo po številu vrstic, določenem v razredu. Uporabite ga lahko na spletni strani, da uporabniku pokažete, da obstaja nekaj besedilnih informacij, ali da skrijete vse nepotrebno besedilo, da preprečite nasičenost spletne strani.
Sintaksa
Spodaj navedena sintaksa je na voljo v » razred ” atribut elementa za uporabo vpetja črte:
V zgoraj definirani sintaksi lahko uporabnik uporabi številke iz ' 1 do 6 ” za uporabo privzetih razredov za vpenjanje linij. Na primer, ' linijska objemka-1 ” razred ne bo dovolil, da bi besedilna vsebina presegla eno vrstico.
Razumejmo koncept razreda 'line-camp' skozi nekaj primerov.
1. primer: uporaba razreda Line Clamp za omejitev vsebine na določeno število vrstic
Omejimo besedilno vsebino na tri vrstice z uporabo razreda za vpenjanje vrstic v Tailwindu, kot je storjeno spodaj:
< div razred = ' zaokrožen-lg flex justify-center bg-slate-200 m-5 p-4' >
< str razred = 'line-objemka-3 w-72' > To je vzorčni odstavek. Vidna bo samo za 3 vrstice. Vsa vsebina po njem bo skrita. To je posledica razreda vpenjanja vrvi v Tailwindu. < / str >
< / div >
Razlaga zgornje kode je naslednja:
- A “ div ' je ustvarjen z zaobljenimi vogali z uporabo ' zaobljeno-lg ” razred. Zagotavlja rob in oblazinjenje z uporabo ' m-{število} ” & “ p-{število} ” razrede.
- Nato se element v elementu div centrira z uporabo ' poravnati na sredino « in razred » flex ” ustvari vsebnik, ki bo vseboval podrejeni element div.
- ' bg-{barva}-{številka} ” nastavi barvo ozadja elementa div.
- A “ ” se ustvari oznaka, ki vsebuje besedilno vsebino. Zagotovljena je fiksna širina z uporabo ' w-{število} ” razred.
- Končno, vsebina besedila » str ' je omejen na tri vrstice z uporabo ' linijska objemka-3 ” razred.
Izhod
V izpisu je razvidno, da je besedilna vsebina, ki presega določeno omejitev treh vrstic, skrita:
2. primer: uporaba razreda Line Clamp s privzetimi stanji v Tailwind
Tailwind ponuja različna privzeta stanja za element, ki jih je mogoče uporabiti za bolj dinamične načrte. Razvijalec lahko uporabi kateri koli razred Tailwind s temi stanji, da elementu zagotovi določeno oblikovno lastnost, kadar koli je to stanje doseženo. Podobno lahko razred »line-clamp« uporabite tudi s temi privzetimi stanji Tailwind.
Sintaksa za uporabo razreda »line-clamp« s stanjem v Tailwindu je podana spodaj:
{ država } : linijska objemka- { število }Obstajajo tri privzeta stanja, ki so opisana takole:
- lebdi: To je stanje elementa, ko uporabnik premakne miškin kazalec nad njim.
- fokus: To je stanje, ko je element v fokusu. Na primer, uporabnik se pomakne do elementa s pritiskom na tipko »tab«.
- aktivno: Stanje, ko element aktivira uporabnik.
V spodnji predstavitvi je vse enako kot v prejšnjem primeru. Edina razlika je v tem, da je razred vpetja vrvi opremljen z ' lebdeti ' država:
< div razred = ' zaokrožen-lg flex justify-center bg-slate-200 m-5 p-4' >< str razred = ' hover:line-clamp-3 w-72' > To je vzorčni odstavek. Vidna bo samo za 3 vrstice. Vsa vsebina po njem bo skrita. To je posledica razreda vpetja lin v Tailwindu. < / str >
< / div >
Upoštevajte, da je ' ' razred zagotavlja ' lebdenje:line-clamp-3 ”, ki bo vsebino besedila omejil na tri vrstice, kadar koli uporabnik premakne kazalec miške nad polje z vsebino.
Izhod
V spodnjem izhodu je razvidno, da se lastnost vpenjanja črte uporabi, ko kazalec miške lebdi nad blokom:
3. primer: uporaba razreda Line Clamp z prelomnimi točkami
Prelomne točke so medijske poizvedbe v Tailwindu, ki uporabnikom pomagajo ustvariti odzivno oblikovno postavitev. Tailwind nudi pet privzetih prelomnih točk z vnaprej določenimi najmanjšimi širinami. Razvijalec lahko s temi prelomnimi točkami uporabi tudi razred vpenjanja črt.
Sintaksa za uporabo razreda za vpenjanje vrstic z prelomnimi točkami je naslednja:
{ predpone prelomnih točk } : linijska objemka- { število }'Predpone prelomnih točk', omenjene v zgornji sintaksi, so naslednje:
- sm: Ta prelomna točka ima minimalno širino 640 slikovnih pik.
- md: Ta prelomna točka ima minimalno širino 768 slikovnih pik.
- lg: Ta prelomna točka ima najmanjšo širino 1024 slikovnih pik.
- xl: Ta prelomna točka ima minimalno širino 1280 slikovnih pik.
- 2xl: Ta prelomna točka ima najmanjšo širino 1536 slikovnih pik.
V spodnji predstavitvi je » str ” je opremljen z različnimi razredi vpenjanja linij na različnih prelomnih točkah. To bo spremenilo lastnost vpenjanja vrstic besedilnega bloka, kadar koli bo dosežena nova prelomna točka:
< div razred = ' zaokrožen-lg flex justify-center bg-slate-200 m-5 p-4' >< str razred = 'line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > To je vzorčni odstavek. Vidna bo samo za 3 vrstice. Vsa vsebina po njem bo skrita. To je posledica razreda vpetja lin v Tailwindu. < / str >
< / div >
Element p ima privzeto razred »line-clamp-1«. Vendar pa bo vsebina besedila v elementu »p« omejena na eno vrstico za » sm ' prelomna točka, dve vrstici za ' md « prelomna točka in tri vrstice za » lg ” prelomna točka.
Izhod
Iz izhoda je razvidno, da se lastnost vpenjanja vrstic besedilnega bloka spreminja s spremembo velikosti zaslona:
Prikazali smo postopek za vpetje besedila v določeno število vrstic v Tailwindu.
Zaključek
Razred vpenjanja vrstic v Tailwindu omeji besedilno vsebino elementa na določeno število vrstic. Razred »lin-clamp-{number}« se uporablja kot sintaksa za vpenjanje besedila v omejene vrstice. Razred vpetja črte je mogoče uporabiti z vnaprej določenimi prelomnimi točkami in različicami stanja v Tailwindu. Ta članek je zagotovil postopek za vpenjanje besedila v določeno število vrstic.