CSS : overflow - Web Formation

Description

La propriété overflow contrôle ce qu’il se passe lorsque le contenu dépasse la taille du bloc définie par width et/ou height.

Elle détermine si le contenu débordant doit être visible, masqué, ou accessible via des barres de défilement.

Elle fonctionne à la fois en largeur et en hauteur.

Propriétés détaillées

overflow : applique la règle aux deux axes.
overflow-x : contrôle le débordement horizontal.
overflow-y : contrôle le débordement vertical.

Valeurs possible

Voici les valeurs les plus courantes pour overflow :

Valeur	Exemple	Description
`visible`	`overflow: visible;`	Le contenu déborde librement du bloc (valeur par défaut).
`hidden`	`overflow: hidden;`	Le débordement est masqué et n’est plus accessible.
`scroll`	`overflow: scroll;`	Ajoute toujours des barres de défilement, même si ce n’est pas nécessaire.
`auto`	`overflow: auto;`	Ajoute une barre de défilement uniquement si nécessaire.

Exemple

Démonstration interactive : overflow

Choisissez une valeur

Aperçu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie velit quis venenatis gravida. Donec eu nibh malesuada, congue orci a, congue metus. Proin a pretium nunc, et blandit turpis. Proin id libero a justo sodales sagittis. Nulla facilisi. Donec congue congue sem, nec malesuada risus malesuada vel. Nunc felis ligula, vehicula nec rutrum vel, porta ac velit. Vestibulum at vehicula ex.

Code HTML & CSS

<div class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie velit quis venenatis gravida. Donec eu nibh malesuada, congue orci a, congue metus. Proin a pretium nunc, et blandit turpis. Proin id libero a justo sodales sagittis. Nulla facilisi. Donec congue congue sem, nec malesuada risus malesuada vel. Nunc felis ligula, vehicula nec rutrum vel, porta ac velit. Vestibulum at vehicula ex.
</div>
<div class="demo">
    <img src="https://juliencrego.com/wp-content/uploads/demo-overflow.webp" style="max-width:initial;">
</div>

<div class="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie velit quis venenatis gravida. Donec eu nibh malesuada, congue orci a, congue metus. Proin a pretium nunc, et blandit turpis. Proin id libero a justo sodales sagittis. Nulla facilisi. Donec congue congue sem, nec malesuada risus malesuada vel. Nunc felis ligula, vehicula nec rutrum vel, porta ac velit. Vestibulum at vehicula ex.</div><div class="demo">    <img src="https://juliencrego.com/wp-content/uploads/demo-overflow.webp" style="max-width:initial;"></div>

.demo {
    margin: 0px auto 100px;
    border: 3px solid red;
    width: 400px;
    height: 140px;
    overflow: visible;
}

.demo {    margin: 0px auto 100px;    border: 3px solid red;    width: 400px;    height: 140px;    overflow: visible;}

.demo {
    margin: 0px auto 100px;
    border: 3px solid red;
    width: 400px;
    height: 140px;
    overflow: hidden;
}

.demo {    margin: 0px auto 100px;    border: 3px solid red;    width: 400px;    height: 140px;    overflow: hidden;}

.demo {
    margin: 0px auto 100px;
    border: 3px solid red;
    width: 400px;
    height: 140px;
    overflow: scroll;
}

.demo {    margin: 0px auto 100px;    border: 3px solid red;    width: 400px;    height: 140px;    overflow: scroll;}

.demo {
    margin: 0px auto 100px;
    border: 3px solid red;
    width: 400px;
    height: 140px;
    overflow: auto;
}

.demo {    margin: 0px auto 100px;    border: 3px solid red;    width: 400px;    height: 140px;    overflow: auto;}

Remarques

overflow: hidden est souvent utilisé pour créer des cadres, mais il peut couper du contenu important.
overflow: auto est recommandé pour afficher une barre de défilement seulement lorsque c’est nécessaire.
Pour créer des ellipses sur du texte (…), il faut combiner overflow, white-space et text-overflow.
overflow peut déclencher la création d’un nouveau contexte de formatage (utile pour certains layouts).