Kako uporabiti »overflow-hidden« in »overflow-visible« v Tailwindu?

, da skrijete prelivno vsebino:

< telo >

< div razred = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS ponuja različne 'preliv' pripomočki, kot npr 'overflow-auto' , 'overflow-scroll' , 'overflow-hidden' ,
'prelivanje-vidno' itd. Ti pripomočki določajo, kako določen element obravnava vsebino ki presega
posoda velikost . Vsak pripomoček ponuja edinstveno funkcionalnost, vendar njihov končni cilj ostaja enak, to je nadzor
obnašanje prelivanja izbrano element.
< / div >

< / telo >

Tukaj:

---

---

• “overflow-hidden” razred se uporablja za skrivanje vsebine, ki presega velikost vsebnika
  .
• “bg-vijolična-300” razred nastavi vijolično barvo za ozadje vsebnika.
• 'p-4' razred določa 4 enote oblazinjenja na vseh straneh posode.
• 'mx-16' razred uporabi 16 enot marže na osi x vsebnika.
• 'mt-5' razred uporabi 5 enot marže na vrhu vsebnika.
• 'h-32' razred nastavi višino posode na 32 enot.
• 'upraviči besedilo' razred poravna besedilo vsebine znotraj vsebnika.

Izhod

V zgornjem izhodu ni mogoče videti prelivajoče se vsebine, kar pomeni, da je bila lastnost »overflow-hidden« uspešno uporabljena.

Kako uporabiti »prelivno vidno« v Tailwindu?

The “prelivanje-vidno” razreda omogoča, da je prekoračena vsebina vidna. Če želite uporabiti 'prelivno-vidno' v Tailwindu, ustvarite strukturo HTML in uporabite razred pripomočkov 'prelivno-vidno' z določenim elementom.

Sintaksa

razred = 'prelivanje-vidno ...' >...< / element>

Primer
V tem primeru bomo uporabili “prelivanje-vidno” pripomoček v vsebnik

za prikaz presežne vsebine:

< telo >

< div razred = 'prelivanje-vidno bg-vijolično-300 p-4 mx-16 mt-5 h-32 poravnava besedila' >
Tailwind CSS ponuja različne 'preliv' pripomočki, kot npr 'overflow-auto' , 'overflow-scroll' , 'overflow-hidden' ,
'prelivanje-vidno' itd. Ti pripomočki določajo, kako določen element obravnava vsebino ki presega
posoda velikost . Vsak pripomoček ponuja edinstveno funkcionalnost, vendar njihov končni cilj ostaja enak, to je nadzor
obnašanje prelivanja izbrano element.
< / div >

< / telo >

Tukaj, v zgornjem delčku kode, je “prelivanje-vidno” razred se uporablja za prikaz vsebine, ki presega velikost vsebnika.

Izhod

V skladu z zgornjim rezultatom je bil pripomoček »vidno prekoračitev« uspešno uporabljen.

Zaključek

Če želite uporabiti »overflow-hidden« in »overflow-visible« v Tailwindu, dodajte “overflow-hidden” in “prelivanje-vidno” uporabne razrede z želenimi elementi v programu HTML. Pripomoček »overflow-hidden« skrije prelivno vsebino, medtem ko »overflow-visible« prikaže prelivno vsebino podanega elementa. Ta članek je ponazoril metodo uporabe »overflow-hidden« in »overflow-visible« pripomočkov v Tailwindu.