CSS La propriété : overflow

.......................

CSS débordement de texte la propriété overflow


Les propriétés CSS

La propriété CSS overflow spécifie ce qui se produit si le contenu déborde la boîte d'un élément

Définition et utilisation:La propriété overflow

Code css : Sélectionner le code
	p
	{
	  overflow : scroll;
	}
	

La valeur par défaut:visible
Héritée:non
Version: CSS2
la syntaxe JavaScript: object.style.overflow="scroll"

Valeurs de la propriété : overflow

Valeur Description
visible rend visible tout ce qui dépasse. Par défaut
hidden cache tout ce qui dépasse.
scroll met toujours une barre de défilement horizontale et verticale.
auto met une barre de défilement horizontale ou verticale si besoin.
inherit Indique que le paramètre de la propriété doit être héritée de l'élément parent. Internet Explorer (IE8 y compris) ne supporte pas cette valeur

overflow-x et overflow-y

Les propriétés overflow-x et overflow-y indiquent si le débordement du contenu doit être modifié horizontalement ou verticalement (ou les deux) :

Définition et utilisation de la propriété overflow-x

La propriété overflow-x indique s'il faut découper le contenu, ajouter une barre de défilement ou afficher le contenu excédentaire d'un élément de niveau bloc, lorsqu'il déborde sur les bords gauche et droit.

Exemple.

Code css :
Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<style>

.element1,.element2,.element3,.element4,.element5,.element6 {border: solid 1px #000;
height:100PX}
.element1{
   overflow-x:visible;
}

.element3{
    overflow-x:hidden;
}

.element4{
   
   overflow-x:auto;
}
.element5{
   
   overflow-x:scroll;
}.element6{
   
   overflow-x:initial;
}
</style>
</head>
<body>
<div class=" enveloppe ">
  <div class="element1">element1</div>
  <div class="element2">2</div>
  <div class="element3">3</div>
  <div class="element4">4</div>
  <div class="element5">element5</div>
  <div class="element6">6</div>
</div>
</body>
</html>


Définition et utilisation de la propriété overflow-y

La propriété overflow-y indique s'il faut tronquer le contenu, ajouter une barre de défilement ou afficher le contenu en surplus d'un élément de niveau bloc lorsqu'il déborde des bords inférieurs.

Exemple.
Pour l'exeple reprenez le meme qu'en haut en replacant bien sur overflow-x par overfelow-y





Par carabde 10 mars 2014
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Utiliser les class et id en css

    Affecter des styles différents à de mêmes balises. Le concept des attributs: class et id....

    Ajouter un texte à une image

    Ajouter un texte à une image

    fonction html_entity_decode, html_entity_decode

    Convertit toutes les entités HTML en caractères normaux