Débordement de Contenu

Considérons comment nous pouvons contrôler le débordement de contenu à l'aide d'une propriété. Il arrive parfois que nous ayons une width et une height fixes pour l'élément. Cependant, le contenu interne est beaucoup plus grand que l'espace disponible. La propriété overflow contrôle le comportement du contenu d'un élément lorsqu'il dépasse les valeurs de height ou width définies explicitement pour l'élément.

• visible - est la valeur par défaut. Le contenu déborde des bordures de l'élément et reste visible ;
• scroll - Le contenu déborde des bordures de l'élément, et une barre de défilement apparaît permettant à l'utilisateur de faire défiler à la fois verticalement et horizontalement ;
• hidden - Le contenu qui déborde de la taille des bordures de l'élément est coupé et non visible ;
• auto - fonctionne de la même manière que scroll. Cependant, les barres de défilement apparaissent uniquement lorsque le contenu déborde des bordures de l'élément.

Remarque

Le contenu débordant n'affecte pas la géométrie des autres éléments.

visible

Si la propriété overflow n'est pas définie, sa valeur par défaut est visible. Cela signifie que le contenu sera affiché en dehors des bordures de l'élément. Dans l'exemple, les bordures de la boîte sont surlignées en darkblue, et la boîte a des propriétés width et height fixes.

défilement

Nous pouvons voir le contenu complet de l'élément en utilisant un défilement. Vérifions l'exemple :

caché

Tout le contenu débordant sera caché, et un utilisateur ne le verra jamais. En général, cela n'est utile que lorsque nous devons développer certains effets décoratifs.