Denne artikkelen vil demonstrere:
Hvordan bruke 'overflow-hidden' i Tailwind?
De 'overløp-skjult' klasse skjuler eller klipper innholdet som overskrider elementets størrelse. For å bruke 'overflow-hidden' i Tailwind, lag et HTML-program og bruk 'overflow-hidden'-verktøyklassen med det spesifikke elementet.
Syntaks
Eksempel
I dette eksemplet vil vi bruke 'overløp-skjult' verktøy til
< kropp >
< div klasse = 'overflyt-skjult bg-lilla-300 p-4 mx-16 mt-5 h-32 tekst-juster' >
Tailwind CSS gir ulike 'flyte' verktøy, som f.eks 'overløp-auto' , 'overløp-scroll' , 'overløp-skjult' ,
'overløpssynlig' osv. Disse verktøyene bestemmer hvordan et spesifikt element håndterer innhold som overstiger
container størrelse . Hvert verktøy tilbyr unik funksjonalitet, men sluttmålet deres forblir det samme, det vil si å kontrollere
overløpsoppførselen til valgt element.
< / div >
< / kropp >
Her:
- 'overløp-skjult' klasse brukes til å skjule innholdet som overskrider størrelsen på -beholderen.
- 'bg-lilla-300' klasse setter den lilla fargen til beholderens bakgrunn.
- 'p-4' klasse setter 4 enheter med polstring på alle sider av beholderen.
- 'mx-16' klasse bruker de 16 marginenhetene på x-aksen til beholderen.
- 'mt-5' klasse bruker de 5 marginenhetene på toppen av beholderen.
- 'h-32' klasse setter høyden på beholderen til 32 enheter.
- 'tekst-begrunne' klasse rettferdiggjør teksten til innholdet inne i beholderen.
Produksjon
I utdataene ovenfor kan ikke det overfylte innholdet sees, noe som indikerer at egenskapen 'overflytskjult' har blitt brukt.
Hvordan bruke 'overflow-visible' i Tailwind?
De 'overløpssynlig' klasse gjør at det overskridende innholdet blir synlig. For å bruke 'overflow-visible' i Tailwind, lag en HTML-struktur og bruk verktøyklassen 'overflow-visible' med det aktuelle elementet.
Syntaks
Eksempel
I dette eksemplet vil vi bruke 'overløpssynlig' verktøyet til-beholderen for å vise overløpsinnholdet: < kropp >
< div klasse = 'overflyt-synlig bg-lilla-300 p-4 mx-16 mt-5 h-32 tekst-juster' >
Tailwind CSS gir ulike 'flyte' verktøy, som f.eks 'overløp-auto' , 'overløp-scroll' , 'overløp-skjult' ,
'overløpssynlig' osv. Disse verktøyene bestemmer hvordan et spesifikt element håndterer innhold som overstiger
container størrelse . Hvert verktøy tilbyr unik funksjonalitet, men sluttmålet deres forblir det samme, det vil si å kontrollere
overløpsoppførselen til valgt element.
< / div >
< / kropp >Her, i kodebiten ovenfor, er 'overløpssynlig' klasse brukes til å vise innholdet som overskrider størrelsen på beholderen.
Produksjon
I henhold til utgangen ovenfor, har verktøyet 'overflyt-synlig' blitt brukt.
Konklusjon
For å bruke 'overflow-hidden' og 'overflow-visible' i Tailwind, legg til 'overløp-skjult' og 'overløpssynlig' verktøyklasser med de ønskede elementene i HTML-programmet. Verktøyet 'overflyt-skjult' skjuler det overfylte innholdet, mens 'overflyt-synlig' viser det overfylte innholdet til det spesifiserte elementet. Denne artikkelen har eksemplifisert metoden for å bruke 'overflow-skjult' og 'overflow-synlige' verktøy i Tailwind.