Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

overflow - Propriété CSS

overflow

Résumé des caractéristiques de la propriété overflow

Description rapide
Gestion des débordements, lorsque le contenu est trop grand pour les dimensions imposées à l'élément.
Statut
Standard
Valeurs prédéfinies
visible | hidden | clip | scroll | auto | overlay
Pourcentages
Ne s'appliquent pas.
Valeur initiale
visible
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété overflow passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Débordements
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: WD (document de travail)

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é raccourcie é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 sens d'écriture (voir la propriété writing-mode pour plus d'information sur le sens 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.

Le tableau ci-après résume l'influence de la direction d'écriture sur les propriétés gérant le débordement :

Langues
européennes
Langues
arabes
Langues
CJK
overflow-x HorizontalHorizontalHorizontal
overflow-y VerticalVerticalVertical
overflow-block VerticalVerticalHorizontal
overflow-inlineHorizontalHorizontalVertical

Syntaxes pour overflow.

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. Ces valeurs seront choisies parmi la liste ci-dessous.

overflow:
 visible visible hidden hidden clip clip scroll scroll auto auto overlay  overlay  visible visible hidden hidden clip clip scroll scroll auto auto overlay  overlay
;
  • overflow: visible;

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

  • 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).

  • 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).

    Remarque : cette valeur présente de gros problèmes de traitement par les navigateurs.

  • 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. Ceci afin que l'espace occupé par les barres de défilement soit toujours le même et que les dimensions du contenu ne soient pas soumises à variation.

  • 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 sa disposition.

    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.

  • 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.

  • 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; overflow: inherit; overflow: revert; overflow: revert-layer; overflow: unset;

    La valeur initiale est : visible .

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.

Ce bloc contient trop de texte pour ses dimensions. Observez l'apparition et la disparition des barres de défilement en fonction de l'animation.

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.


overflow-x :

overflow-y :

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

Les retours ne sont pas acceptés sur cette première ligne.

La traduction française pour overflow serait "débordement", ce qui correspond tout à fait à la fonction de cette propriété : gérer le débordement d'un contenu lorsque la place qui lui est attribué est insuffisante.

 

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

Exemple pour overflow

 

 

 

Simulateur avec gestion de la direction d'écriture.


Mode d'écriture :

overflow-block :

overflow-inline :

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

Les retours ne sont pas acceptés sur cette première ligne.

La traduction française pour overflow serait "débordement", ce qui correspond tout à fait à la fonction de cette propriété : gérer le débordement d'un contenu lorsque la place qui lui est attribué est insuffisante.

 

Effet des propriétés logiques sur un élément contenant une image.

Exemple pour overflow

 

 

 

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).

Colonne 1
Support de la propriété overflow permettant de paramétrer en une seule écriture les débordements horizontal et vertical.
Colonne 2
Support des propriétés overflow-x et .
Colonne 3
Traitement de la valeur overlay dans la syntaxe de ces propriétés.
Colonne 4
Support des propriétés logiques overflow-block et overflow-inline, qui s'adaptent à la direction d'écriture en fonction de la langue du texte.
1
overflow
2
overflow-x
overflow-y
3
Valeur overlay
4
overflow-block
overflow-inline
Estimation de la prise en charge en pourcentage du parc actuel.
97%
97%
5%
3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que overflow.

Les spécifications CSS éditées par le W3C sont organisées en modules. overflow fait partie du Module CSS - Débordements (CSS Overflow Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Gère l'affichage d'une marque de suite à la fin d'un élément lorsque le contenu déborde de ce dernier.
Gestion des débordements dans la direction secondaire.
Définit la marge de débordement, lorsque le contenu est plus grand que l'élément.
Gestion des débordements dans la direction principale.
Gestion du débordement dans le sens horizontal.
Gestion du débordement dans le sens vertical.
Choisit entre un défilement brutal ou progressif de la page.
Réserve ou non la gouttière pour une barre de défilement.
Définit l'indicateur de débordement du texte.