Paano Gamitin ang 'overflow-hidden' at 'overflow-visible' sa Tailwind?

container upang itago ang overflow na nilalaman:

< katawan >

< div klase = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Ang Tailwind CSS ay nagbibigay ng iba't-ibang 'pag-apaw' mga kagamitan, tulad ng 'overflow-auto' , 'overflow-scroll' , 'overflow-hidden' ,
'overflow-visible' atbp. Tinutukoy ng mga utility na ito kung paano pinangangasiwaan ng isang partikular na elemento ang nilalaman na lumampas sa
lalagyan laki . Ang bawat utility ay nag-aalok ng natatanging functionality, gayunpaman, ang kanilang layunin ay nananatiling pareho, ibig sabihin, upang makontrol
ang umaapaw na pag-uugali ng pinili elemento.
< / div >

< / katawan >

dito:

---

---

• 'nakatago-overflow' class ay ginagamit upang itago ang nilalaman na lumampas sa laki ng
  na lalagyan.
• “bg-purple-300” itinatakda ng klase ang lilang kulay sa background ng lalagyan.
• “p-4” ang klase ay nagtatakda ng 4 na unit ng padding sa buong gilid ng lalagyan.
• “mx-16” inilalapat ng klase ang 16 na yunit ng margin sa x-axis ng lalagyan.
• “mt-5” inilalapat ng klase ang 5 unit ng margin sa tuktok ng lalagyan.
• “h-32” Itinatakda ng klase ang taas ng lalagyan sa 32 units.
• 'text-justify' binibigyang-katwiran ng klase ang teksto ng nilalaman sa loob ng lalagyan.

Output

Sa output sa itaas, hindi makikita ang umaapaw na content na nagpapahiwatig na matagumpay na nailapat ang property na 'overflow-hidden'.

Paano Gamitin ang 'overflow-visible' sa Tailwind?

Ang 'nakikitang overflow' Ang klase ay nagbibigay-daan sa labis na nilalaman na makita. Para magamit ang 'overflow-visible' sa Tailwind, gumawa ng HTML structure at ilapat ang utility class na 'overflow-visible' na may partikular na elemento.

Syntax

klase = 'nakikitang umaapaw ...' >...< / elemento>

Halimbawa
Sa halimbawang ito, ilalapat natin ang 'nakikitang overflow' utility sa

container upang ipakita ang overflow na nilalaman:

< katawan >

< div klase = 'overflow-visible bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Ang Tailwind CSS ay nagbibigay ng iba't-ibang 'pag-apaw' mga kagamitan, tulad ng 'overflow-auto' , 'overflow-scroll' , 'overflow-hidden' ,
'overflow-visible' atbp. Tinutukoy ng mga utility na ito kung paano pinangangasiwaan ng isang partikular na elemento ang nilalaman na lumampas sa
lalagyan laki . Ang bawat utility ay nag-aalok ng natatanging functionality, gayunpaman, ang kanilang layunin ay nananatiling pareho, ibig sabihin, upang makontrol
ang umaapaw na pag-uugali ng pinili elemento.
< / div >

< / katawan >

Dito, sa snippet ng code sa itaas, ang 'nakikitang overflow' class ay ginagamit upang ipakita ang nilalaman na lumampas sa laki ng lalagyan.

Output

Ayon sa output sa itaas, matagumpay na nailapat ang 'overflow-visible' na utility.

Konklusyon

Upang gamitin ang 'overflow-hidden' at 'overflow-visible' sa Tailwind, idagdag ang 'nakatago-overflow' at 'nakikitang overflow' mga utility class na may mga gustong elemento sa HTML program. Itinatago ng utility na 'overflow-hidden' ang umaapaw na content habang ipinapakita ng 'overflow-visible' ang umaapaw na content ng tinukoy na elemento. Inihalimbawa ng artikulong ito ang paraan ng paggamit ng 'overflow-hidden' at 'overflow-visible' na mga utility sa Tailwind.