Accueil    CSS    Propriété overflow-x
 



style css overflow-x  Style CSS overflow-x

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété overflow-x permet d'attribuer un comportement spécifique sur le rendu horizontal d'un élément html pour gérer le cas où son contenu dépasse sa largeur (le conteneur doit être dimensionné avec la propriété width) en permettant par exemple d'afficher une barre de scroll horitontale.

Ses différentes valeurs sont :
   - auto : la scrollbar horizontale est affichée uniquement si le contenu dépasse la largeur du conteneur
   - hidden : pas de scrollbar, le contenu qui dépasse la largeur du conteneur n'est pas visible
   - scroll : la scrollbar horizontale est systématiquement visible
   - visible : pas de scrollbar, le contenu s'affiche en dehors du conteneur s'il dépasse sa largeur

Deux valeurs qui ne sont pas encore implémentées existent également :
   - no-content : si le contenu dépasse la largeur du conteneur, celui-ci n'est pas visible
      comme si on appliquait le style visibility:hidden (l'espace occupé par l'élément est préservé)
   - no-display : si le contenu dépasse la largeur du conteneur, celui-ci n'est pas affiché
      comme si on appliquait le style display:none (l'espace pris par l'élément n'est pas préservé)



Propriétés pour le style overflow-x :




Propriété Définition Valeurs CSS
overflow-x Indique le comportement horizontal à appliquer à un élément lorsque le contenu dépasse sa largeur (spécifiquement au niveau de l'affichage de la scrollbar) auto
hidden
no-content
no-display
scroll
visible
inherit
CSS 3


Exemple d'utilisation du style css overflow-x :




Utilisation des différentes valorisations de la propriété overflow-x :

<div style="width:350px; overflow-x:scroll; border:dotted 1px black; white-space:nowrap;">
   Exemple de texte inclus dans un élément de taille fixe avec la propriété :
   <br />overflow-x:scroll;
   <br />La propriété white-space:nowrap; est également employée pour empêcher les retours à la ligne automatiques.
   <br />La scrollbar horizontale est ajoutée systématiquement au niveau du conteneur.
</div >

<div style="width:350px; overflow-x:hidden; border:dotted 1px black; white-space:nowrap;">
   Exemple de texte inclus dans un élément de taille fixe avec la propriété :
   overflow-x:hidden;
   <br />La propriété white-space:nowrap; est également employée pour empêcher les retours à la ligne automatiques.
   <br />Le contenu est masqué par le conteneur s'il dépasse sa taille.
</div >

<div style="width:350px; overflow-x:auto; border:dotted 1px black; white-space:nowrap;">
   Exemple de texte inclus dans un élément de taille fixe avec la propriété :
   <br />overflow-x:auto;
   <br />La scrollbar horizontale est ajoutée si le contenu dépasse la taille.
</div >

<div style="width:350px; overflow-x:visible; border:dotted 1px black; white-space:nowrap;">
   Exemple de texte inclus dans un élément de taille fixe avec la propriété :
   <br />overflow-x:visible;
   <br />Le contenu sort du conteneur s'il dépasse sa taille.
   <br />Il n'y a pas d'affichage de la barre de scroll horizontale.
</div >



Exemple de texte inclus dans un élément de taille fixe avec la propriété :
overflow-x:scroll;
La propriété white-space:nowrap; est également employée pour empêcher les retours à la ligne automatiques.
La scrollbar horizontale est ajoutée systématiquement au niveau du conteneur.


Exemple de texte inclus dans un élément de taille fixe avec la propriété :
overflow-x:hidden;
La propriété white-space:nowrap; est également employée pour empêcher les retours à la ligne automatiques.
Le contenu est masqué par le conteneur s'il dépasse sa taille.


Exemple de texte inclus dans un élément de taille fixe avec la propriété :
overflow-x:auto;
La scrollbar horizontale est ajoutée si le contenu dépasse la taille.


Exemple de texte inclus dans un élément de taille fixe avec la propriété :
overflow-x:visible;
Le contenu sort du conteneur s'il dépasse sa taille.
Il n'y a pas d'affichage de la barre de scroll horizontale.