overflow-x |
Débordement horizontal |
| CSS3 |
|
Syntaxe
|
overflow-x: auto|hidden|inherit|initial|scroll|visible;
|
Paramètres
| Paramètre |
Description |
| auto |
Ce paramètre permet d'indiquer que la débordement est capturé et d'ajouter une barre de défilement pour le reste du contenu si nécessaire. |
| hidden |
Ce paramètre permet d'indiquer que le débordement est capturé et que le reste du contenu doit être invisible. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
| scroll |
Ce paramètre permet d'indiquer que la débordement est capturé et d'ajouter le reste du contenu. |
| visible |
Ce paramètre permet d'indiquer que le débordement n'est pas capturé. |
Description
Cette propriété permet de fixer le débordement horizontal du défilement d'une balise.
Remarques
- Définition et rôle : La propriété overflow-x permet de gérer la manière dont le contenu débordant horizontalement est affiché dans un élément. Elle est
utilisée pour contrôler si une barre de défilement horizontale est affichée ou si le contenu est simplement masqué ou visible.
- Différence avec overflow : overflow-x est une version spécifique de overflow contrôlant uniquement le débordement horizontal. Lorsque
overflow est utilisé, il affecte à la fois les axes horizontal (x) et vertical (y). En revanche, overflow-x permet un contrôle granulaire.
- Interaction avec overflow-y : La valeur de overflow-x peut être influencée par celle de overflow-y. Par exemple, si overflow-y est
défini sur scroll, certains navigateurs Web afficheront une barre horizontale même si overflow-x est défini sur hidden.
- Usage courant avec les tableaux et les images : overflow-x est fréquemment utilisé pour gérer le débordement des tableaux ou des images dans les mises
en page responsives. Par exemple, en utilisant overflow-x: auto;, une barre de défilement horizontale est affichée uniquement si le tableau dépasse la largeur de
son conteneur.
- Compatibilité avec les navigateurs : La propriété overflow-x est bien prise en charge par tous les navigateurs modernes, y compris
Internet Explorer 8 et les versions ultérieures. Cependant, il peut y avoir des incohérences dans la gestion combinée avec
overflow-y sur d'anciens navigateurs Web.
- Effets sur le comportement du défilement : Lorsque overflow-x est défini sur hidden, le contenu débordant devient inaccessible pour les utilisateurs,
ce qui peut poser des problèmes d'accessibilité. Dans ce cas, il est important de proposer une alternative ou de permettre une navigation claire.
- Interaction avec les styles display et position : overflow-x fonctionne uniquement sur les éléments ayant un contexte de bloc ou de boîte.
Par exemple, si un élément a display: inline, la propriété n'aura aucun effet. Elle est également influencée par les contextes de conteneurs comme ceux définis avec
position: relative ou absolute.
Dernière mise à jour : Dimanche, le 20 décembre 2015
