Propriété de débordement CSS | Expliqué

En développant des sites Web, nous rencontrons souvent des situations où le contenu présent dans certains éléments HTML déborde. Vous pouvez choisir quoi faire avec le contenu débordant à l'aide de la propriété CSS Overflow. Ce message est conçu pour éclairer ses lecteurs sur les détails de la propriété Overflow dans CSS.

Ce tutoriel couvre.

1. Propriété de débordement
2. Valeur visible
3. Valeur cachée
4. Valeur automatique
5. Overflow-x et débordement

Commençons.

Propriété de débordement

La propriété Overflow contrôle le comportement du contenu qui déborde la zone spécifiée d'un élément, en outre, la propriété de débordement est conçue pour les éléments au niveau des blocs uniquement.

Comme d'autres propriétés CSS, la propriété de débordement présente également certaines valeurs qui sont expliquées en profondeur ci-dessous.

Valeur visible

Ceci est une valeur par défaut de la propriété de débordement. Supposons que si votre contenu est placé dans une boîte et déborde, cette valeur affichera le contenu dépassant la zone de la boîte. De plus, le contenu affiché à l'extérieur de la frontière de la boîte ne perturbera pas l'alignement des autres éléments environnants.

Voici un exemple de cette valeur.

Html

En développant des sites Web, nous rencontrons souvent des situations où le contenu présent dans certains éléments HTML déborde. Vous pouvez choisir quoi faire avec le contenu débordant à l'aide de la propriété CSS Overflow.

CSS

Sortir

Passant à la valeur suivante.

Valeur cachée

La valeur cachée de la propriété de débordement cache tout le contenu qui dépasse la zone de la boîte. Cette propriété doit être gérée avec soin car le contenu que cette propriété masque est complètement invisible pour l'utilisateur, cependant, il est mieux adapté pour afficher le contenu de nature dynamique. Vous trouverez ci-dessous un exemple de la valeur cachée.

Sortir

Le contenu dépassant la zone de la boîte a été caché.

Valeur de défilement

Cette valeur cache le contenu qui dépasse la zone de la boîte à l'intérieur de la boîte et fournit des barres de défilement verticales et horizontales pour afficher le contenu. Voici un exemple.

Sortir

Les barres de défilement ont été ajoutées.

Valeur automatique

Cette valeur a une fonction similaire à la valeur de défilement, cependant, ce qui le rend différent de la valeur de défilement, c'est qu'il ajoute des barres de défilement à la boîte uniquement lorsque le contenu dépasse la zone de la boîte. De plus, il ajoutera uniquement le type de barre de défilement requis. Voici un exemple.

Sortir

La valeur automatique de la propriété de débordement est appliquée avec succès.

Overflow-x et débordement

Ce sont deux propriétés supplémentaires qui contrôlent ce qui arrive au contenu débordant horizontalement ou verticalement. La propriété Overflow-X contrôle le comportement horizontal du contenu tandis que la propriété trop-flux détermine le comportement vertical du contenu. Voici un exemple.

Dans l'exemple ci-dessus, la propriété Overflow-X a reçu une valeur de défilement et un débordement-y a été attribué à une valeur cachée en conséquence, le contenu dépassant la zone de la boîte sera masqué et la boîte aura une barre de défilement verticale.

Sortir

Conclusion

La propriété Overflow est utilisée pour contrôler le comportement du contenu qui déborde la zone spécifiée d'un élément, en outre, la propriété de débordement est conçue pour les éléments au niveau du bloc uniquement. La propriété Overflow rend quatre valeurs qui sont; Visible, défilement, caché et auto. Il existe deux propriétés supplémentaires qui contrôlent ce qui arrive au contenu débordant horizontalement ou verticalement qui sont; débordement-x et débordement. Ce message traite de la propriété de débordement en profondeur avec l'aide d'exemples appropriés.