La propriété CSS: overflow

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

Les propriétés CSS

La propriété CSS overflow détermine la façon dont un élément de niveau bloc gère le contenu qui déborde de ses limites. Elle peut être utilisée pour couper, masquer ou faire défiler le contenu qui déborde.
Par exemple, si un élément a une hauteur et une largeur fixes et que le contenu qu'il contient est plus grand que les dimensions de l'élément, la propriété overflow peut être utilisée pour gérer le contenu excédentaire.

La propriété de débordement peut avoir l'une des valeurs suivantes :
- visible : Le contenu débordant n'est pas écrêté et sera visible en dehors des limites de l'élément. Il s'agit de la valeur par défaut.
- hidden (caché) : Le contenu débordant est masqué, et une barre de défilement ne sera pas affichée pour y accéder.
- scroll : Une barre de défilement est ajoutée à l'élément, que le contenu déborde ou non de ses limites.
- auto : Une barre de défilement est ajoutée à l'élément uniquement si le contenu déborde de ses limites.

La propriété overflow peut être utilisée sur n'importe quel élément de niveau bloc, tel qu'une balise div ou p. Elle peut également être appliquée au corps de l'élément. Elle peut également être appliquée à l'élément body pour contrôler le comportement de la page entière.
Voici un exemple d'utilisation de la propriété overflow dans une règle CSS :

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"

overflow-x et overflow-y

La propriété overflow peut être combinée avec les propriétés overflow-x et overflow-y pour contrôler le comportement du contenu débordant dans les directions horizontale et verticale, respectivement.

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">element2</div>
  <div class="element3">element3</div>
  <div class="element4">element4</div>
  <div class="element5">element5</div>
  <div class="element6">element6</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

En résumé, la propriété overflow est un outil utile pour contrôler le comportement du contenu débordant en CSS. Elle vous permet de décider de couper, de masquer ou de faire défiler le contenu, ce qui vous donne un plus grand contrôle sur la mise en page et la conception de votre page Web.

Sommaire

Par carabde 10 mars 2014

Utilisation de la propriété CSS overflow pour contrôler le contenu débordant.

Les propriétés CSS par ordre alphabétique

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

overflow-x et overflow-y

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

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

La méthode secrète likes sans fin sur Facebook