Overflow - Propriété CSS

Schéma syntaxique de overflow.

Description du schéma :

• overflow accepte une ou deux valeurs séparées par un espace. Si deux valeurs sont précisées, la première se rapporte au débordement dans le sens horizontal et la deuxième dans le sens vertical. Si une seule valeur est précisée, elle s'applique aux débordements vertical et horizontal.

A quoi correspond la propriété CSS overflow ?

overflow est une propriété du langage CSS. Elle définit comment doit se comporter le navigateur web lorsqu'un contenu est plus grand que l'espace qui lui est réservé.

Autrement dit, overflow définit si le contenu plus grand que l'espace réservé est visible quand même (débordement), s'il est masqué, ou bien s'il peut défiler à la demande du lecteur. La mise en place de barres de défilement est intéressante sur l'écran afin d'économiser de la place, mais il faut penser à une autre solution lors de l'impression car le contenu serait alors définitivement invisible. La valeur associée à overflow sera donc souvent différente en fonction du périphérique utilisé : voir la directive @media pour résoudre ce problème.

overflow fonctionne sur les éléments dont les propriétés height, et éventuellement width sont fixées, sinon l'élément s'agrandit en fonction du contenu et il n'y a jamais de débordement.

Il faut savoir que l'affichage de barres de défilement se fait au détriment de la place réservée au contenu. Autrement dit les barres de défilement n'agrandissent pas les dimensions extérieures de l'élément.

La technique qui consiste à cacher du contenu en l'enfermant dans un élément trop petit, de façon à ce qu'il soit invisible pour le lecteur mais visible aux moteurs de recherche, est une mauvaise pratique. La norme demande aux navigateurs de supprimer entièrement le contenu non visible et qui ne peut défiler.

Reportez-vous également à la propriété text-overflow pour l'affichage d'un symbole indiquant que le contenu est tronqué, et à la propriété overflow-clip-margin qui permet de fixer les marges de débordement.

overflow est une propriété résumée équivalente aux deux propriétés suivantes :

• overflow-x : gestion du débordement horizontal.
• overflow-y : gestion du débordement vertical.

Propriétés logiques équivalentes.

Le débordement peut aussi être géré par les deux propriétés logiques suivantes, qui sont dépendantes du mode d'écriture suivant la langue (voir la propriété writing-mode pour plus d'information sur le mode d'écriture).

• overflow-inline : gestion du débordement dans le sens principal (direction des lignes).
• overflow-block : gestion du débordement dans la direction des blocs.

La correspondance avec les propriétés physiques dans chacune des langues est illustrée ci-dessous.

Valeurs pour overflow.

• overflow: visible;

  Le contenu est affiché en entier, même s'il dépasse les dimensions définies pour son bloc, au risque d'entrer en collision avec les éléments qui suivent.

  Ce texte déborde les dimensions de l'élément. Mais son contenu est quand même affiché, au risque d'entrer en collision avec les éléments qui suivent.
  overflow:visible;
• overflow: hidden;

  Le contenu qui dépasse l'espace réservé n'est pas affiché. Le navigateur n'est pas censé proposer des barres de défilement pour afficher la partie du contenu qui est masquée et ne doit pas non plus permettre le défilement par un autre moyen (molette de souris, raccourci clavier...). Le lecteur n'a donc aucun moyen d'afficher le contenu masqué : cela doit cependant être possible par programme (un code Javascript par exemple).

  Ce texte déborde les dimensions de l'élément. Le contenu qui déborde est masqué, Il n'est pas possible pour le lecteur de le faire apparaître.
  overflow:hidden;
• overflow: clip; ⚠

  Comme avec la valeur hidden, le contenu qui dépasse l'espace réservé n'est pas affiché et le lecteur n'a aucun moyen de le faire défiler : pas de barres de défilement, raccourcis clavier et molette de souris désactivés. Il ne doit pas être possible non plus de faire défiler le contenu par programme (c'est la différence avec la valeur hidden).

  Ce texte déborde les dimensions de l'élément. Le contenu qui déborde est masqué, Il n'est pas possible pour le lecteur de le faire apparaître.
  overflow:clip;
• overflow: scroll;

  Le contenu qui déborde est masqué mais il est possible de la faire apparaître en utilisant les barres de défilement affichées par le navigateur. Ces dernières doivent rester visibles même si le contenu est affiché en totalité et n'a donc pas besoin de défilement. Cette option est intéressante car les barres de défilement occupant toujours le même espace, la place réservée au contenu est inchangée. Il n'est donc pas nécessaire de recalculer la disposition du texte lorsque les barres de défilement deviennent nécessaires.

  Ce texte déborde les dimensions de l'élément. Le contenu qui déborde est masqué mais peut être affiché avec les barres de défilement toujours présentes.
  overflow:scroll;
• overflow: auto;

  Des barres de défilement permettent de faire défiler le contenu masqué, mais ces barres ne s'affichent que si le contenu déborde de la place réservée à cet élément. L'espace réservé au contenu proprement dit peut donc se trouver modifié lorsque les barres de défilement apparaissent, ce qui occasionne un nouveau calcul de la disposition du contenu.

  Il y a cependant un moyen pour éviter que l'apparition des barres de défilement modifie l'espace réservé au contenu, c'est de définir une marge intérieure (padding) sur la droite et en bas de l'élément. En effet, l'espace nécessaire aux barres de défilement est pris sur les marges intérieures.

  En ajustant les dimensions de cet élément, vous pouvez faire en sorte que le texte déborde les dimensions de l'élément. Les barres de défilement s'affichent alors, lorsqu'elles sont nécessaires.
  overflow:auto
• overflow: overlay; ✗

  Comme pour la valeur auto : des barres de défilement s'affichent si et seulement si le contenu déborde de la place réservée. Mais les barres de défilement s'affichent par dessus le contenu, sans réduire l'espace réservé à ce dernier. En contrepartie bien sûr une petite partie du contenu peut se retrouver masqué par les barres de défilement.
  Cette valeur n'est pas standardisée : elle n'est traitée que par Chrome et quelques autres navigateurs.

  En ajustant les dimensions de cet élément, vous pouvez faire en sorte que le texte déborde les dimensions de l'élément. Les barres de défilement s'affichent alors par dessus le contenu.
  overflow:overlay
• overflow: hidden scroll;

  Exemple de syntaxe définissant une gestion différente du débordement horizontal et du débordement vertical. Les deux valeurs sont séparées par un espace.

• overflow: -moz-hidden-unscrollable; ✗

  Ces valeurs étaient proposées par les navigateurs utilisant le moteur Mozilla (Firefox...). Elles n'ont pas été retenues dans la norme. Utilisez leur équivalent standardisé :

  -moz-scrollbars-none remplacé par hidden.
  -moz-scrollbars-horizontal remplacé par overflow-x: scroll.
  -moz-scrollbars-vertical remplacé par overflow-y: scroll.
  -moz-hidden-unscrollable remplacé par hidden..

• overflow: initial; (visible ) overflow: inherit; overflow: revert; overflow: revertLayer; overflow: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Exemples avec la propriété overflow.

Il arrive souvent qu'on soit amené à faire défiler le contenu d'un tableau, mais sans perdre les en-tête et les pieds de pages. C'est possible, à condition d'afficher les sections du tableau (le thead, le tbody et le tfoot) comme des blocs. Il faudra également définir la largeur de toutes les colonnes sur chacune des ces sections.

Animation de la propriété overflow.

L'animation de overflow ne présente pas grand intérêt. L'exemple ci-dessous illustre surtout le fait que la présence des barres de défilement (surtout celle pour le défilement vertical) nécessite de recalculer la répartition du texte dans le bloc, puisque l'espace réservé au contenu est réduit de la largeur des barres.

Manipulation de la propriété overflow par programme.

Avec Javascript, modifier la valeur de overflow.

En Javascript, voici deux exemples de code pour modifier la valeur de overflow.

let el = document.getElementById('id'); el.style['overflow'] = 'clip'; // ou let el = document.getElementById('id'); el.style.overflow = 'clip';

Avec Javascript, lire la valeur de overflow.

Cet exemple de code fonctionne si la propriété a été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['overflow']; // ou let el = document.getElementById('id'); let value = el.style.overflow;

Avec Javascript, lire la valeur calculée de overflow.

La valeur calculée est celle qui résulte de la cascade des héritages, ou, à défaut, ce sera la valeur initiale (visible dans le cas de overflow).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('overflow');

Avec JQuery, modifier la valeur de overflow.

JQuery permet également de manipuler les valeurs de propriétés, avec des syntaxes généralement plus courtes que celles de Javascript.


$('#id').css('overflow', 'clip');


Avec JQuery, lire la valeur calculée de overflow.

let value = $('#id').css('overflow');

Autres exemples de code.

Voir d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété overflow et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de overflow ce sera la même chose car cette propriété n'accepte que des valeurs prédéfinies.

Simulateur pour la propriété raccourcie overflow.

Les dimensions de l'élément sont matérialisées par un arrière-plan bleu clair. On voit que le contenu, que ce soit le texte ou l'image, ne tient pas dans ces dimensions. Observez l'effet de la propriété overflow sur la partie du contenu qui déborde.

Vous pouvez ajuster les dimensions des éléments pour observer les différences minimes entre certaines valeurs comme entre overlay et scroll.

Effet de overflow sur un élément contenant du texte.

Effet de overflow sur un élément contenant une image.

Simulateur avec gestion de la direction d'écriture.

Effet des propriétés logiques sur un élément contenant du texte.

Compatibilité avec les navigateurs.

La propriété overflow est bien prise en charge par l'ensemble des navigateurs. Attention cependant à la valeur overlay qui souffre encore de problèmes de compatibilité.

Par contre les propriétés logiques overflow-block et overflow-inline ne sont traitées que par Firefox (2022).

Remarques :

(1) La valeur overlay est reconnue mais a le même effet que auto.

1

Propriété
résumée
overflow

2

Propriétés
overflow-x
overflow-y

3

Propriétés
overflow-block
overflow-inline

4

Valeur
overlay
 

Estimation de la prise en charge globale.

96%

96%

69%

7%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra

1

QQ Browser

Safari

1

Safari sur IOS

1

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

1

Edge

1

Firefox

Androïd Brower

1

Chrome pour Androïd

1

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Historique de la propriété overflow.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Introduction de la propriété overflow dans la version 2.xx du langage CSS.
  La propriété n'accepte qu'une seule valeur, valable aussi bien pour le débordement horizontal que vertical.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Débordements - Niveau 3

  La propriété overflow devient une propriété résumée pour overflow-x et overflow-y. Ceci permet de gérer séparément le débordement horizontal et le débordement vertical.
  Introduction des propriétés logiques pour gérer le débordement : overflow-inline et overflow-block
  

  18 Avril 2013

  Document de travail.

  

  

  

• Module CSS - Débordements - Niveau 4

  Pas de changement concernant les propriétés overflow.
  

  13 Juin 2017

  Document de travail.

  

  

  

Voir aussi, concernant la gestion des débordements.

Le module de spécification CSS Overflow Module regroupe tout ce qui concerne les débordements (contenu plus grand que la place réservée). La propriété overflow, ainsi que les suivantes, sont décrites dans ce module.

Propriétés :