Hvordan bruger man 'overløbsskjult' og 'overløbssynlig' i Tailwind?

-beholderen for at skjule overløbsindholdet:

< legeme >

< div klasse = 'overløbsskjult bg-lilla-300 p-4 mx-16 mt-5 h-32 tekst-juster' >
Tailwind CSS giver forskellige 'flyde over' forsyninger, som f.eks 'overløbsautomatik' , 'overløb-scroll' , 'overløbsskjult' ,
'overløbssynlig' osv. Disse hjælpeprogrammer bestemmer, hvordan et specifikt element håndterer indhold der overstiger
beholder størrelse . Hvert hjælpeprogram tilbyder unik funktionalitet, men deres endelige mål forbliver det samme, dvs
overløbsadfærden hos valgte element.
< / div >

< / legeme >

Her:

---

---

• 'overløbsskjult' klasse bruges til at skjule indholdet, der overstiger størrelsen på
  -beholderen.
• 'bg-lilla-300' klasse indstiller den lilla farve til beholderens baggrund.
• 'p-4' klasse sæt 4 enheder polstring på containerens alle sider.
• 'mx-16' klasse anvender de 16 marginenheder på containerens x-akse.
• 'mt-5' klasse anvender de 5 enheder margen til toppen af ​​beholderen.
• 'h-32' klasse indstiller containerens højde til 32 enheder.
• 'tekst-begrund' klasse retfærdiggør teksten af ​​indholdet inde i beholderen.

Produktion

I ovenstående output kan det overfyldte indhold ikke ses, hvilket indikerer, at egenskaben 'overflow-hidden' er blevet anvendt.

Hvordan bruger man 'overflow-visible' i Tailwind?

Det 'overløbssynlig' klasse gør det muligt for det overskridende indhold at være synligt. For at bruge 'overflow-visible' i Tailwind skal du oprette en HTML-struktur og anvende værktøjsklassen 'overflow-visible' med det pågældende element.

Syntaks

klasse = 'overløbssynlig ...' >...< / element>

Eksempel
I dette eksempel vil vi anvende 'overløbssynlig' værktøj til

-beholderen for at vise overløbsindholdet:

< legeme >

< div klasse = 'overløbssynlig bg-lilla-300 p-4 mx-16 mt-5 h-32 tekst-juster' >
Tailwind CSS giver forskellige 'flyde over' forsyninger, som f.eks 'overløbsautomatik' , 'overløb-scroll' , 'overløbsskjult' ,
'overløbssynlig' osv. Disse hjælpeprogrammer bestemmer, hvordan et specifikt element håndterer indhold der overstiger
beholder størrelse . Hvert hjælpeprogram tilbyder unik funktionalitet, men deres endelige mål forbliver det samme, dvs
overløbsadfærden hos valgte element.
< / div >

< / legeme >

Her, i ovenstående kodestykke, er 'overløbssynlig' klasse bruges til at vise indholdet, der overstiger beholderens størrelse.

Produktion

Ifølge ovenstående output er 'overflow-visible'-værktøjet blevet anvendt med succes.

Konklusion

For at bruge 'overflow-hidden' og 'overflow-visible' i Tailwind, skal du tilføje 'overløbsskjult' og 'overløbssynlig' hjælpeklasser med de ønskede elementer i HTML-programmet. 'Overflow-hidden'-værktøjet skjuler det overfyldte indhold, mens 'overflow-visible' viser det overfyldte indhold af det angivne element. Denne artikel har eksemplificeret metoden til at bruge 'overflow-skjulte' og 'overflow-synlige' hjælpeprogrammer i Tailwind.