overflow-x CSS propriété

Définition de la CSS overflow-x.

La propriété CSS overflow-x permet de gérer la manière dont est rogné horizontalement le contenu lorsque votre contenu est plus large que la longueur spécifiée de votre élément. La propriété CSS overflow-x gère aussi, la manière dont est affiché les barres de défilement horizontal de l'élément (scrollbar).

Exemple de syntaxe CSS overflow-x :
overflow-x : hidden;
overflow-x : visible;
overflow-x : scroll;
overflow-x : auto;

La propriété de feuille de style overflow-x CSS peut prendre la valeur de rognage :

  • visible : rend visible tout ce qui dépasse de l'élément et ne met pas barre de défilement. Valeur par défaut.
  • hidden : cache tout ce qui dépasse de l'élément et ne met pas barre de défilement (scrollbar).
  • scroll : met toujours une barre de défilement horizontale.
  • auto : met une barre de défilement horizontale si besoin.
  • inherit : hérite de la propriété CSS overflow-x de son parent (CSS2).

Conditions d'application de la CSS overflow-x.

La propriété de feuille de style overflow-x CSS est applicable sur toutes les balises HTML ou XHTML dont on a précisé la propriété CSS ou et qui ne sont pas de type :inline.

La valeur de la CSS overflow-x peut être mise directement dans la propriété de raccourci CSS .

Problème d'interprétation de overflow-x en Css.

Attention, pour les versions Internet Explorer < 7 pour overflow-x:visible le bloc s'adapte au contenu.

Règles de syntaxes CSS pour overflow-x.

Complément sur overflow-x

Quand vous faites un overflow-x autre que visible, la propriété CSS fonctionne comme si elle était à auto.

Compatibilités navigateurs de la propriété overflow-x

Equivalence de la CSS overflow-x en HTML.

La propriété CSS overflow-x n'a pas d'équivalence en HTML.

Exemples et astuces CSS pour utiliser overflow-x

Infos complémentaires Firefox/Nestcape

Comme vous pouvez le constater la propriété de feuille de style css overflow-x n'est pas compatible avec les navigateurs comme Firefox>1.5/Nestcape.
Pour faire le même effet vous devez utilisez le code suivant :

Exemple de code :
#dmcscroll{ display: block; overflow:hidden; overflow-x: auto; overflow-y: hidden; overflow : -moz-scrollbars-horizontal; }

Exemple :

DmcaimelescssetlesfeuillesdestyleDmcaimelescssetlesfeuillesdestyleDmc aime les css et les feuilles de style Dmc aime les css

Copie d'écran

Votre avis sur la définition overflow-x en CSS

Votez pour la définition CSS overflow-x

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/overflow-x-css.html Votes: 4.2 / 5 - 26 votes
Cliquez sur une étoile pour voter.