overflow
Décide quoi faire du contenu qui ne tient pas dans un élément.
- Valeur initiale
visible- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs de bloc, conteneurs flex et conteneurs grid
- JavaScript
element.style.overflow = "auto"
Exemple
#.table-wrapper {
overflow-x: auto;
}<div class="table-wrapper stage">
<table style="min-width: 520px; border-collapse: collapse;">
<tr><th align="left">Cours</th><th align="left">Modules</th><th align="left">Tâches</th><th align="left">Niveau</th></tr>
<tr><td>HTML et CSS</td><td>11</td><td>738</td><td>Débutant</td></tr>
</table>
</div>Définition et utilisation
#La propriété overflow définit le comportement du contenu qui dépasse des dimensions d’un élément. Par défaut (visible), il déborde à l’extérieur. Vous pouvez aussi le découper, afficher des barres de défilement en permanence, ou seulement quand elles sont nécessaires.
C’est un raccourci pour overflow-x et overflow-y. En indiquant deux valeurs, vous réglez séparément l’axe horizontal et l’axe vertical, par exemple un défilement horizontal uniquement pour un tableau large.
Les valeurs autres que visible et clip créent un nouveau conteneur de défilement. Cela a des effets secondaires : par exemple, un ancêtre avec overflow: hidden désactive position: sticky chez ses descendants.
Syntaxe
#overflow: visible | hidden | clip | scroll | auto (1 à 2 valeurs);Valeurs
#- Le contenu dépasse de l’élément.
- L’excédent de contenu est découpé, mais reste accessible au défilement par script.
- Une barre de défilement apparaît seulement quand le contenu ne tient pas.
- Les barres de défilement sont toujours visibles (selon le système).
- Découpe sans créer de conteneur de défilement, donc ne casse pas
position: sticky.
Valeurs en pratique
#visible
.demo { overflow: visible; }auto
.demo { overflow: auto; }scroll
.demo { overflow: scroll; }clip
position: sticky..demo { overflow: clip; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Sur téléphone, enveloppez les tableaux larges dans un élément avec
overflow-x: auto, plutôt que de compresser les colonnes. - Si
position: stickya cessé de fonctionner, cherchez un ancêtre avecoverflow: hiddenet remplacez-le paroverflow: clip.
Entrées associées
#- max-heightDéfinit la hauteur maximale d’un élément.
- text-overflowDétermine comment marquer un texte coupé à la fin d’une ligne, par exemple avec des points de suspension.
- positionChoisit la façon de positionner un élément : dans le flux, en relatif, en absolu, en fixe ou en collant.
- overflow-xDécide quoi faire du contenu qui dépasse horizontalement. Sa jumelle overflow-y fait la même chose verticalement.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.