overflow

Exemple interactif

overflow: visible;

overflow: hidden;

overflow: clip;

overflow: scroll;

overflow: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Le trimestre de la Saint-Michel vient de s'achever, et le Lord Chancelier
    siège à Lincoln's Inn Hall. Le temps de novembre est implacable. Il y a
    autant de boue dans les rues que si les eaux venaient à peine de se retirer
    de la surface de la terre.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Propriétés constitutives

Cette propriété est un raccourci pour les propriétés CSS suivantes :

• overflow-x
• overflow-y

Syntaxe

/* Valeurs avec un mot-clé */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Valeurs globales */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

La propriété overflow est définie avec un ou deux mots-clés <overflow>. Si un seul mot-clé est défini, overflow-x et overflow-y sont définis avec la même valeur. Si deux mots-clés sont définis, la première valeur s'applique à overflow-x dans la direction horizontale et la seconde valeur s'applique à overflow-y dans la direction verticale.

Valeurs

visible

Le contenu débordant n'est pas coupé et peut être visible en dehors de la boîte de remplissage de l'élément. La boîte de l'élément n'est pas un conteneur de défilement. C'est la valeur par défaut de la propriété overflow.

hidden

Le contenu débordant est coupé à la boîte de remplissage de l'élément. Il n'y a pas de barres de défilement, et le contenu coupé n'est pas visible (c'est-à-dire que le contenu coupé est masqué), mais le contenu existe toujours. Les agents utilisateurs n'ajoutent pas de barres de défilement et n'autorisent pas non plus les utilisateur·ice·s à voir le contenu en dehors de la zone coupée par des actions telles que le glissement sur un écran tactile ou l'utilisation de la molette de la souris. Le contenu peut être défilé par programmation (par exemple, en liant à un texte d'ancrage, en tabulant vers un élément masqué mais focalisable, ou en définissant la valeur de la propriété scrollLeft ou de la méthode scrollTo()), auquel cas la boîte de l'élément est un conteneur de défilement.

clip

Le contenu débordant est coupé à la bordure de découpe du débordement de l'élément, définie à l'aide de la propriété overflow-clip-margin. En conséquence, le contenu déborde de la boîte de remplissage de l'élément de la valeur <length> de overflow-clip-margin ou de 0px si elle n'est pas définie. Le contenu débordant en dehors de la zone découpée n'est pas visible, les agents utilisateurs n'ajoutent pas de barre de défilement et le défilement programmatique n'est pas non plus pris en charge. Aucun nouveau contexte de formatage n'est créé. Pour établir un contexte de formatage, utilisez overflow: clip avec display: flow-root. La boîte de l'élément n'est pas un conteneur de défilement.

scroll

Le contenu débordant est coupé à la boîte de remplissage de l'élément, et le contenu débordant peut être défilé dans la vue à l'aide de barres de défilement. Les agents utilisateurs affichent des barres de défilement que le contenu déborde ou non, donc dans les directions horizontale et verticale si la valeur s'applique aux deux directions. L'utilisation de ce mot-clé peut donc empêcher les barres de défilement d'apparaître et de disparaître lorsque le contenu change. Les imprimantes peuvent toujours imprimer le contenu débordant. La boîte de l'élément est un conteneur de défilement.

auto

Le contenu débordant est coupé à la boîte de remplissage de l'élément, et le contenu débordant peut être défilé dans la vue à l'aide de barres de défilement. Contrairement à scroll, les agents utilisateurs affichent des barres de défilement uniquement si le contenu déborde. Si le contenu tient dans la boîte de remplissage de l'élément, il ressemble à visible mais établit toujours un nouveau contexte de formatage. La boîte de l'élément est un conteneur de défilement.

Description

Les options de débordement incluent la possibilité de masquer le contenu débordant, d'activer les barres de défilement pour visualiser le contenu débordant ou d'afficher le contenu s'écoulant en dehors de la boîte d'un élément dans la zone environnante, ainsi que des combinaisons de ces options.

Les nuances suivantes doivent être prises en compte lors de l'utilisation des différents mots-clés pour overflow :

• Définir une valeur autre que visible (la valeur par défaut) ou clip pour overflow crée un nouveau contexte de formatage de bloc. Cela est nécessaire pour des raisons techniques ; si un flottant intersecte avec un élément défilant, il réorganiserait de force le contenu après chaque étape de défilement, ce qui entraînerait une expérience de défilement lente.
• Pour qu'un réglage de overflow produise l'effet souhaité, l'élément de niveau bloc doit avoir soit une hauteur définie (height ou max-height) si le débordement est dans la direction verticale, une largeur définie (width ou max-width) si le débordement est dans la direction horizontale, une taille de bloc définie (block-size ou max-block-size) si le débordement est dans la direction du bloc, ou une taille en ligne définie (inline-size ou max-inline-size) ou white-space définie sur nowrap si le débordement est dans la direction en ligne.
• Définir overflow sur visible dans une direction (c'est-à-dire overflow-x ou overflow-y) lorsqu'il n'est pas défini sur visible ou clip dans l'autre direction entraîne le comportement de la valeur visible comme auto.
• Définir overflow sur clip dans une direction lorsqu'il n'est pas défini sur visible ou clip dans l'autre direction entraîne le comportement de la valeur clip comme hidden.
• La propriété JavaScript Element.scrollTop peut être utilisée pour faire défiler le contenu dans un conteneur de défilement, sauf lorsque overflow est défini sur clip.
• Définir overflow sur des images et d'autres éléments remplacés fonctionne comme prévu dans les navigateurs qui prennent en charge le module CSS Overflow Level 4 ; dans les versions précédentes de la spécification, les éléments remplacés étaient toujours coupés au conteneur de délimitation. Voir Compatibilité des navigateurs pour les navigateurs pris en charge.

Définition formelle

Syntaxe formelle

overflow = 
  <'overflow-block'>{1,2}  

<overflow-block> = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto     

Accessibilité

Une zone de contenu défilante n'est pas focalisable au clavier, elle ne peut donc pas être défilée par un utilisateur utilisant uniquement le clavier. Firefox et Chrome 132 et versions ultérieures font exception ; ils rendent les conteneurs de défilement focalisables par défaut.

Pour les autres navigateurs, pour permettre aux utilisateur·ice·s utilisant uniquement le clavier de faire défiler le conteneur, vous devrez attribuer un tabindex au conteneur en utilisant tabindex="0". Malheureusement, lorsqu'un lecteur d'écran rencontre ce point de tabulation, il peut ne pas avoir de contexte sur le conteneur et pourrait annoncer l'intégralité du contenu du conteneur. Pour atténuer cela, donnez au conteneur un rôle WAI-ARIA approprié (role="region", par exemple) et un nom accessible (avec aria-label ou aria-labelledby).

Exemples

Démonstration des résultats des différents mots-clés overflow

HTML

<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou&nbsp;: «&nbsp;J'ai appris que les gens oublieront ce que vous
    avez dit, les gens oublieront ce que vous avez fait, mais les gens
    n'oublieront jamais comment vous les avez fait se sentir.&nbsp;»
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou&nbsp;: «&nbsp;J'ai appris que les gens oublieront ce que vous
    avez dit, les gens oublieront ce que vous avez fait, mais les gens
    n'oublieront jamais comment vous les avez fait se sentir.&nbsp;»
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou&nbsp;: «&nbsp;J'ai appris que les gens oublieront ce que vous
    avez dit, les gens oublieront ce que vous avez fait, mais les gens
    n'oublieront jamais comment vous les avez fait se sentir.&nbsp;»
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou&nbsp;: «&nbsp;J'ai appris que les gens oublieront ce que vous
    avez dit, les gens oublieront ce que vous avez fait, mais les gens
    n'oublieront jamais comment vous les avez fait se sentir.&nbsp;»
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou&nbsp;: «&nbsp;J'ai appris que les gens oublieront ce que vous
    avez dit, les gens oublieront ce que vous avez fait, mais les gens
    n'oublieront jamais comment vous les avez fait se sentir.&nbsp;»
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Maya Angelou&nbsp;: «&nbsp;J'ai appris que les gens oublieront ce que vous
    avez dit, les gens oublieront ce que vous avez fait, mais les gens
    n'oublieront jamais comment vous les avez fait se sentir.&nbsp;»
  </p>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés overflow-x, overflow-y
• Les propriétés overflow-block, overflow-clip-margin, overflow-inline
• Les propriétés clip, display, text-overflow, white-space
• L'attribut SVG overflow
• Le module de débordement CSS
• Zones de défilement accessibles uniquement au clavier ^(angl.) sur adrianroselli.com (2022)