Dit artikel zal demonstreren:
Hoe gebruik je 'overflow-hidden' in Tailwind?
De 'overloop verborgen' class verbergt of knipt de inhoud die de grootte van dat element overschrijdt. Om de 'overflow-hidden' in Tailwind te gebruiken, maakt u een HTML-programma en past u de 'overflow-hidden' utility class toe met het specifieke element.
Syntaxis
Voorbeeld
In dit voorbeeld passen we de 'overloop verborgen' hulpprogramma naar de
< lichaam >
< div klas = 'overloop-verborgen bg-paars-300 p-4 mx-16 mt-5 h-32 tekst-uitvullen' >
Tailwind CSS biedt verschillende 'overloop' nutsvoorzieningen, zoals 'overloop-auto' , 'overloop-scroll' , 'overloop verborgen' ,
'overloop zichtbaar' enz. Deze hulpprogramma's bepalen hoe een specifiek element omgaat met de inhoud dat overtreft de
container maat . Elk hulpprogramma biedt unieke functionaliteit, maar hun einddoel blijft hetzelfde, namelijk controle
het overloopgedrag van de geselecteerd element.
< / div >
< / lichaam >
Hier:
- 'overloop verborgen' class wordt gebruikt om de inhoud te verbergen die de grootte van de -container overschrijdt.
- “bg-paars-300” class stelt de paarse kleur in op de achtergrond van de container.
- 'p-4' class sets 4 eenheden opvulling aan alle kanten van de container.
- 'mx-16' class past de 16 marge-eenheden toe op de x-as van de container.
- 'mt-5' class past de marge van 5 eenheden toe op de bovenkant van de container.
- 'h-32' class stelt de hoogte van de container in op 32 eenheden.
- 'tekst-uitvullen' klasse rechtvaardigt de tekst van de inhoud in de container.
Uitgang
In de bovenstaande uitvoer kan de overlopende inhoud niet worden gezien, wat aangeeft dat de eigenschap 'overflow-hidden' met succes is toegepast.
Hoe 'overloop-zichtbaar' te gebruiken in Tailwind?
De “overloop-zichtbaar” class maakt het mogelijk om de overschrijding van de inhoud zichtbaar te maken. Om de 'overflow-visible' in Tailwind te gebruiken, maakt u een HTML-structuur en past u de 'overflow-visible' utility-klasse toe met het specifieke element.
Syntaxis
Voorbeeld
In dit voorbeeld passen we de “overloop-zichtbaar” hulpprogramma naar de-container om de overloopinhoud weer te geven: < lichaam >
< div klas = 'overloop-zichtbaar bg-paars-300 p-4 mx-16 mt-5 h-32 tekst-uitvullen' >
Tailwind CSS biedt verschillende 'overloop' nutsvoorzieningen, zoals 'overloop-auto' , 'overloop-scroll' , 'overloop verborgen' ,
'overloop zichtbaar' enz. Deze hulpprogramma's bepalen hoe een specifiek element omgaat met de inhoud dat overtreft de
container maat . Elk hulpprogramma biedt unieke functionaliteit, maar hun einddoel blijft hetzelfde, namelijk controle
het overloopgedrag van de geselecteerd element.
< / div >
< / lichaam >Hier, in het bovenstaande codefragment, de “overloop-zichtbaar” class wordt gebruikt om de inhoud weer te geven die de grootte van de container overschrijdt.
Uitgang
Volgens de bovenstaande uitvoer is het hulpprogramma 'overflow-visible' met succes toegepast.
Conclusie
Om de 'overflow-hidden' en 'overflow-visible' in Tailwind te gebruiken, voegt u de 'overloop verborgen' En “overloop-zichtbaar” utility-klassen met de gewenste elementen in het HTML-programma. Het hulpprogramma 'overflow-hidden' verbergt de overlopende inhoud, terwijl de 'overflow-visible' de overlopende inhoud van het opgegeven element weergeeft. Dit artikel heeft een voorbeeld gegeven van de methode van het gebruik van 'overflow-hidden' en 'overflow-visible' hulpprogramma's in Tailwind.