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 :

CSS - Propriété 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é.

Description de la propriété overflow.

overflow définit comment gérer le débordement du contenu lorsqu'il est trop grand pour tenir dans l'espace qui lui est réservé. 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.

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.

overflow définit si le contenu plus grand que l'espace réservé est visible quand même, s'il est masqué, ou 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.

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

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;

    Valeur par défaut. L'élément 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.

  • 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-scrollbars-none; overflow: -moz-scrollbars-horizontal; overflow: -moz-scrollbars-vertical ; 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;

    La valeur initiale est visible.

  • overflow: unset; overflow: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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

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

 

*