Comment utiliser 'débordement caché' et 'débordement visible' dans Tailwind ?

pour masquer le contenu de débordement :

< corps >

< div classe = 'débordement-caché bg-violet-300 p-4 mx-16 mt-5 h-32 texte-justifier' >
Tailwind CSS fournit divers 'débordement' utilitaires, tels que 'débordement-auto' , 'débordement-défilement' , 'débordement caché' ,
'débordement visible' etc. Ces utilitaires déterminent comment un élément spécifique gère les contenu qui dépasse le
récipient taille . Chaque utilitaire offre une fonctionnalité unique, cependant, leur objectif final reste le même, c'est-à-dire contrôler
le comportement de débordement du choisi élément.
< / div >

< / corps >

Ici:

---

---

• 'débordement caché' La classe est utilisée pour masquer le contenu qui dépasse la taille du conteneur
  .
• 'bg-violet-300' La classe définit la couleur violette de l'arrière-plan du conteneur.
• 'p-4' classe définit 4 unités de rembourrage sur tout le côté du conteneur.
• 'mx-16' classe applique les 16 unités de marge sur l'axe des abscisses du conteneur.
• 'mt-5' classe applique les 5 unités de marge au sommet du conteneur.
• 'h-32' classe définit la hauteur du conteneur à 32 unités.
• 'justifier le texte' classe justifie le texte du contenu à l'intérieur du conteneur.

Sortir

Dans la sortie ci-dessus, le contenu débordant ne peut pas être vu, ce qui indique que la propriété 'overflow-hidden' a été appliquée avec succès.

Comment utiliser 'overflow-visible' dans Tailwind ?

Le 'débordement visible' class permet au contenu dépassant d'être visible. Pour utiliser le 'overflow-visible' dans Tailwind, créez une structure HTML et appliquez la classe utilitaire 'overflow-visible' avec l'élément particulier.

Syntaxe

<élément classe = 'débordement visible ...' >...< / élément>

Exemple
Dans cet exemple, nous appliquerons le 'débordement visible' utilitaire au conteneur