overflow - Propriété CSS
Résumé des caractéristiques de la propriété overflow
visible
| hidden
| clip
| scroll
| auto
| overlay
visible
overflow
passe d'une valeur à l'autre sans transition.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 | Horizontal | Horizontal | Horizontal |
overflow-y | Vertical | Vertical | Vertical |
overflow-block | Vertical | Vertical | Horizontal |
overflow-inline | Horizontal | Horizontal | Vertical |
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:
;
- 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: 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.
- 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é parhidden
.
-moz-scrollbars-horizontal
remplacé paroverflow-x: scroll
.
-moz-scrollbars-vertical
remplacé paroverflow-y: scroll
.
-moz-hidden-unscrollable
remplacé parhidden.
. 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.
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.
Effet des propriétés logiques sur un élément contenant une image.
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.
overflow
overflow-x
overflow-y
overlay
overflow-block
overflow-inline
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.