CSS La propriété overflow

La propriété CSS overflow

La propriété CSS overflow contrôle ce qui se passe lorsque le contenu est trop grand pour tenir dans une zone.

Elle spécifie s'il faut couper le contenu ou ajouter des barres de défilement lorsque le contenu d'un élément déborde.

La propriété overflow a les valeurs suivantes :

  • visible - Par défaut. Le débordement n'est pas coupé et le contenu s'affiche en dehors de la boîte de l'élément.
  • hidden - Le débordement est coupé et le reste du contenu est caché.
  • scroll - Des barres de défilement sont ajoutées. L'utilisateur doit faire défiler pour voir tout le contenu.
  • auto - Semblable à scroll , mais ajoute des barres de défilement uniquement lorsque cela est nécessaire.

Ici, des barres de défilement sont ajoutées en cas de débordement :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Essayez-le vous-même »

CSS overflow: visible

Par défaut, le débordement est visible , ce qui signifie qu'il n'est pas coupé et qu'il s'affiche en dehors de la boîte de l'élément :

Vous pouvez utiliser la propriété overflow lorsque vous souhaitez avoir un meilleur contrôle de la mise en page. La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Exemple

div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
Essayez-le vous-même »

CSS overflow: hidden

Avec la valeur hidden , le débordement est coupé et le reste du contenu est caché :

Exemple

div {
overflow: hidden;
}
Essayez-le vous-même »

CSS overflow: scroll

Avec la valeur scroll , des barres de défilement horizontales et verticales sont toujours ajoutées. L'utilisateur doit faire défiler pour voir tout le contenu :

Vous pouvez utiliser la propriété overflow lorsque vous souhaitez avoir un meilleur contrôle de la mise en page. La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Exemple

div {
overflow: scroll;
}
Essayez-le vous-même »

CSS overflow: auto

La valeur auto est similaire à scroll , mais elle ajoute des barres de défilement uniquement lorsque cela est nécessaire :

Vous pouvez utiliser la propriété overflow lorsque vous souhaitez avoir un meilleur contrôle de la mise en page. La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Exemple

div {
overflow: auto;
}
Essayez-le vous-même »

CSS overflow-x et overflow-y

Les propriétés overflow-x et overflow-y spécifient s'il faut changer le débordement du contenu uniquement horizontalement ou verticalement (ou les deux) :

  • overflow-x spécifie quoi faire avec les bords gauche/droit du contenu.
  • overflow-y spécifie quoi faire avec les bords haut/bas du contenu.
Vous pouvez utiliser la propriété overflow lorsque vous souhaitez avoir un meilleur contrôle de la mise en page. La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Exemple

div {
overflow-x: hidden; /* Cacher la barre de défilement horizontale */
overflow-y: scroll; /* Ajouter une barre de défilement verticale */
}
Essayez-le vous-même »

Toutes les propriétés CSS Overflow

Propriété Description
overflow Spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.
overflow-anchor Permet de désactiver l'ancrage de défilement.
overflow-x Spécifie quoi faire avec les bords gauche/droit du contenu s'il déborde de la zone de contenu de l'élément.
overflow-y Spécifie quoi faire avec les bords haut/bas du contenu s'il déborde de la zone de contenu de l'élément.
overflow-wrap Spécifie si le navigateur peut ou non couper les lignes avec de longs mots, s'ils débordent de leur conteneur.