Ovaj članak će pružiti postupak za stezanje teksta u stražnji vjetar.
Kako stegnuti tekst u određeni broj redaka?
Klasa stezanja redaka u Tailwindu ograničava tekstualni sadržaj u bloku na određeni broj redaka. Radeći to, tekstualni blok će sakriti tekst nakon broja redaka navedenog u klasi. Može se koristiti na web stranici da pokaže korisniku da postoje neke tekstualne informacije ili da sakrije sav nepotreban tekst kako bi se izbjeglo zasićenje web stranice.
Sintaksa
Dolje navedena sintaksa nalazi se u ' razreda ” atribut elementa za primjenu stezanja linije:
U gore definiranoj sintaksi, korisnik može koristiti brojeve iz ' 1 do 6 ” za korištenje zadanih klasa stezanja linija. Na primjer, ' linijska stezaljka-1 ” klasa neće dopustiti da tekstualni sadržaj prelazi jedan redak.
Razumimo koncept klase 'line-camp' kroz neke primjere.
Primjer 1: Koristite klasu Line Clamp za ograničavanje sadržaja na određeni broj redaka
Ograničimo tekstualni sadržaj na tri retka koristeći klasu stezanja linije u Tailwindu kao što je učinjeno u nastavku:
< div razreda = ' zaobljeni-lg flex poravnati-centar bg-slate-200 m-5 p-4' >
< str razreda = 'line-clamp-3 w-72' > Ovo je primjer paragrafa. Bit će vidljiv samo za 3 retka. Sav sadržaj nakon njega postat će skriven. To je zbog klase stezanja konopa u Tailwindu. < / str >
< / div >
Objašnjenje gornjeg koda je sljedeće:
- A “ div ' element je stvoren sa zaobljenim kutovima pomoću ' zaobljeno-lg ” razred. Omogućuje margine i ispune pomoću ' m-{broj} ” & “ p-{broj} ” razreda.
- Zatim se element u elementu div centrira pomoću ' poravnati-centrirati ' razred i ' savijati ” klasa stvara spremnik koji će sadržavati podređeni element div.
- ' bg-{boja}-{broj} ” klasa postavlja boju pozadine div elementa.
- A “ ” stvara se oznaka koja sadrži tekstualni sadržaj. Pruža se fiksna širina pomoću ' w-{broj} ” razred.
- Konačno, sadržaj teksta ' str ' element je ograničen na tri retka pomoću ' linijska stezaljka-3 ” razred.
Izlaz
U izlazu se može vidjeti da je tekstualni sadržaj koji premašuje navedeno ograničenje od tri retka skriven:
Primjer 2: Upotreba klase Line Clamp sa zadanim stanjima u Tailwindu
Tailwind pruža različita zadana stanja za element koji se mogu koristiti za dinamičnije izglede dizajna. Programer može upotrijebiti bilo koju klasu Tailwind s ovim stanjima kako bi osigurao navedeno svojstvo dizajna elementu kad god se to stanje postigne. Slično, klasa 'line-clamp' također se može koristiti s ovim zadanim stanjima stražnjeg vjetra.
Sintaksa za korištenje klase 'line-clamp' sa stanjem u Tailwindu dana je u nastavku:
{ država } : linijska stezaljka- { broj }Postoje tri zadana stanja koja su opisana na sljedeći način:
- lebdjeti: To je stanje elementa kada korisnik prijeđe kursorom miša iznad njega.
- usredotočenost: To je stanje kada je element u fokusu. Na primjer, korisnik dolazi do elementa pritiskom na tipku 'tab'.
- aktivan: Stanje kada je element aktiviran od strane korisnika.
U donjoj demonstraciji sve je identično prethodnom primjeru. Jedina razlika je u tome što je klasa stezanja linije opremljena s ' lebdjeti ' država:
< div razreda = ' zaobljeni-lg flex poravnati-centar bg-slate-200 m-5 p-4' >< str razreda = ' hover:line-clamp-3 w-72' > Ovo je primjer paragrafa. Bit će vidljiv samo za 3 retka. Sav sadržaj nakon njega postat će skriven. To je zbog klase stezanja lane u Tailwindu. < / str >
< / div >
Imajte na umu da ' ' klasu pruža ' lebdjeti:line-clamp-3 ”, koja će ograničiti tekstualni sadržaj na tri retka kad god korisnik prijeđe kursorom miša iznad okvira sa sadržajem.
Izlaz
U donjem izlazu se može vidjeti da se svojstvo stezanja linije primjenjuje kada kursor miša lebdi iznad bloka:
Primjer 3: Koristite klasu Line Clamp s prijelomnim točkama
Prijelomne točke su medijski upiti u Tailwindu koji pomažu korisnicima da stvore izgled responzivnog dizajna. Tailwind pruža pet zadanih prijelomnih točaka s unaprijed definiranim minimalnim širinama. Programer također može koristiti klasu stezanja linije s ovim prijelomnim točkama.
Sintaksa za korištenje klase stezanja linije s prijelomnim točkama je sljedeća:
{ prijelomne točke } : linijska stezaljka- { broj }'Prefiksi prijelomnih točaka' spomenuti u gornjoj sintaksi su sljedeći:
- sm: Ova prijelomna točka ima minimalnu širinu od 640 piksela.
- doktor medicine: Ova prijelomna točka ima minimalnu širinu od 768 piksela.
- lg: Ova prijelomna točka ima minimalnu širinu od 1024 px.
- xl: Ova prijelomna točka ima minimalnu širinu od 1280 piksela.
- 2xl: Ova prijelomna točka ima minimalnu širinu od 1536 px.
U dolje navedenoj demonstraciji, ' str ” element ima različite klase stezanja linije na različitim prijelomnim točkama. Ovo će promijeniti svojstvo stezanja retka tekstualnog bloka kad god se dosegne nova prijelomna točka:
< div razreda = ' zaobljeni-lg flex poravnati-centar bg-slate-200 m-5 p-4' >< str razreda = 'line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Ovo je primjer paragrafa. Bit će vidljiv samo za 3 retka. Sav sadržaj nakon njega postat će skriven. To je zbog klase stezanja lane u Tailwindu. < / str >
< / div >
Element p prema zadanim je postavkama opremljen klasom 'line-clamp-1'. Međutim, sadržaj teksta u elementu 'p' bit će ograničen na jedan redak za ' sm ” prijelomna točka, dva retka za “ doktor medicine ' prijelomna točka i tri retka za ' lg ” prijelomna točka.
Izlaz
Iz izlaza je jasno da se svojstvo stezanja linije bloka teksta mijenja kako se mijenja veličina zaslona:
Demonstrirali smo postupak stezanja teksta na određeni broj redaka u Tailwindu.
Zaključak
Klasa stezanja linije u Tailwindu ograničava tekstualni sadržaj elementa na određeni broj redaka. Klasa 'lin-clamp-{number}' koristi se kao sintaksa za stezanje teksta u ograničene retke. Klasa stezanja linije može se koristiti s unaprijed definiranim prekidnim točkama i varijantama stanja u Tailwindu. Ovaj je članak dao postupak stezanja teksta na određeni broj redaka.