Overflow - Propriété CSS
Résumé des caractéristiques de la propriété overflow
visible | hidden | clip | scroll | auto | overlayvisible overflow passe d'une valeur à l'autre sans transition.Schéma syntaxique de overflow.
overflowLes liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG
Description du schéma :
overflowaccepte 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.
<-- overflow-x --><-- overflow-y -->Le tableau ci-après résume l'influence de la direction d'écriture sur les propriétés gérant le débordement :
Syntaxes 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: 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 valeurhidden).Remarque : cette valeur présente de gros problèmes de traitement par les navigateurs.
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: 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: 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-noneremplacé parhidden.
-moz-scrollbars-horizontalremplacé paroverflow-x: scroll.
-moz-scrollbars-verticalremplacé paroverflow-y: scroll.
-moz-hidden-unscrollableremplacé parhidden..
Valeurs communes :
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.
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.
Modifier la valeur de overflow en Javascript.
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';
Lire la valeur de overflow avec Javascript.
Ces exemples de code fonctionnent 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.
let el = document.getElementById('id');
let value = el.style['overflow'];
// ou
let el = document.getElementById('id');
let value = el.style.overflow;
Lire la valeur calculée de overflow avec Javascript.
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');
Modifier la valeur de overflow avec JQuery.
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');
Lire la valeur calculée de overflow avec JQuery.
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.
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.
Simulateur avec gestion de la direction d'écriture.
Effet des propriétés logiques 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.
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).
overflow permettant de paramétrer en une seule écriture les débordements horizontal et vertical.
overflow-x et .
overlay dans la syntaxe de ces propriétés.
overflow-block et overflow-inline, qui s'adaptent à la direction d'écriture en fonction de la langue du texte.
résumée
overflowoverflow-x
overflow-yoverlayoverflow-block
overflow-inlineNavigateurs 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
UC Browser pour Androïd
Opéra mini
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éoverflowdans 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 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Débordements - Niveau 3
La propriétéoverflowdevient une propriété résumée pouroverflow-xetoverflow-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-inlineetoverflow-block18 Avril 2013Document de travail.
-
Module CSS - Débordements - Niveau 4
Pas de changement concernant les propriétésoverflow.13 Juin 2017Document 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.