Cette rédaction illustrera :
Comment utiliser 'overflow-auto' dans Tailwind ?
Le ' débordement-auto ” classe ajoute automatiquement des barres de défilement lorsque le contenu déborde. Il n'affiche pas la barre de défilement si le contenu ne déborde pas. Pour utiliser le 'overflow-auto' dans Tailwind, créez un programme HTML et ajoutez le ' débordement-auto ” classe utilitaire à l'élément souhaité dans le programme HTML.
Syntaxe
< élément classe = 'débordement-auto ...' > ... élément >
Exemple
Dans cet exemple, nous appliquerons le 'débordement-auto' utilité à la
récipient: < corps >
< div classe = 'débordement-auto bg-violet-300 p-4 mx-16 mt-5 h-32 texte-justifier' >
Tailwind CSS fournit divers utilitaires 'overflow', tels que 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible', etc. Ces utilitaires déterminent comment un élément spécifique gère le contenu qui dépasse le conteneur 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 de l'élément sélectionné.
< / div >
< / corps >
- 'débordement-auto' la classe est utilisée pour ajouter les barres de défilement à la conteneur et ne les affichez que lorsque le défilement est nécessaire.
- 'bg-violet-300' La classe définit la couleur violette sur la couleur d'arrière-plan du conteneur.
- 'p-4' la classe définit 4 unités de rembourrage sur tous les côtés 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
La sortie ci-dessus affiche une barre de défilement verticale lorsque le texte déborde. Ceci indique que le 'débordement-auto' l'utilitaire a été appliqué avec succès à l'élément.
Comment utiliser 'overflow-scroll' dans Tailwind ?
Cet utilitaire ajoute les barres de défilement au conteneur et les affiche toujours même si le défilement n'est pas nécessaire. Il permet également le défilement dans toutes les directions. Pour utiliser le 'overflow-scroll' dans Tailwind, créez un programme HTML et ajoutez le 'débordement-défilement' classe utilitaire à l'élément particulier dans le programme HTML.
Syntaxe
< élément classe = 'débordement-défilement ...' > ... élément > Exemple
Dans cet exemple, nous appliquerons le 'débordement-défilement' utilité à la
< div classe = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS fournit divers utilitaires 'overflow', tels que 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible', etc. Ces utilitaires déterminent comment un élément spécifique gère le contenu qui dépasse le conteneur 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 de l'élément sélectionné.
< / div >
< / corps >
Ici le 'débordement-défilement' la classe est utilisée pour ajouter les barres de défilement à la
conteneur et les affiche toujours.Sortir
Dans la sortie ci-dessus, les barres de défilement verticales et horizontales peuvent être vues. Ceci indique que le 'débordement-défilement' l'utilitaire a été appliqué avec succès à l'élément.
Conclusion
Pour utiliser le 'overflow-auto' et 'overflow-scroll' dans Tailwind, il est nécessaire d'ajouter le 'débordement-auto' et 'débordement-défilement' classes utilitaires aux éléments souhaités dans le programme HTML. Les deux classes utilitaires ajoutent des barres de défilement aux éléments spécifiés. Cependant, la classe 'overflow-auto' affiche les barres de défilement uniquement lorsque le défilement est nécessaire tandis que la classe 'overflow-scroll' les affiche toujours même si le défilement n'est pas nécessaire. Cet article a illustré les méthodes d'utilisation de 'overflow-auto' et 'overflow-scroll' dans Tailwind.