Propriété overflow

La propriété overflow indique au navigateur comment traiter le contenu (texte, images, autres blocs) qui dépasse des limites du bloc (sa largeur ou sa hauteur). Le navigateur peut masquer la partie débordante, ajouter des barres de défilement ou ne rien faire (laisser tel quel - débordant des limites).

Syntaxe

sélecteur {
	overflow: hidden | scroll | auto | visible;
}

Valeurs

Valeur	Description
`hidden`	Masque le contenu qui dépasse des limites du bloc.
`scroll`	Ajoute des barres de défilement, et ce toujours, même si rien ne dépasse (dans ce cas, elles seront inactives).
`auto`	Ajoute des barres de défilement si nécessaire : si le contenu ne tient pas - elles apparaîtront, si tout tient - elles ne seront pas là.
`visible`	Ne masque pas le contenu qui dépasse des limites du bloc.

Valeur par défaut : visible.

Exemple . Valeur visible

Dans cet exemple, un mot très long ne tiendra pas dans le conteneur et dépassera de ses limites. Aucun écrêtage ne se produit :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Exemple . Valeur visible

Maintenant, la hauteur est également limitée (le texte dépassera du bloc en hauteur également) :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Exemple . Valeur hidden

Maintenant, tout ce qui dépasse des limites du conteneur sera simplement rogné (en hauteur aussi). Veuillez noter que l'écrêtage en hauteur ne se produit que lorsque celle-ci est explicitement définie. Dans le cas contraire, le texte étend le conteneur en hauteur - et aucun écrêtage n'aura lieu :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Exemple . Valeur scroll

Avec la valeur scroll, les barres de défilement seront toujours présentes, même si rien ne dépasse (dans ce cas, elles seront inactives). Actuellement, le texte ne dépasse ni en largeur, ni en hauteur, mais les barres de défilement sont tout de même là (inactives) :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Exemple . Valeur auto

Avec la valeur auto, les barres de défilement sont ajoutées uniquement si le contenu dépasse du conteneur. Actuellement, elles sont absentes, car tout tient :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Exemple . Valeur auto

Maintenant, limitons la largeur - une barre de défilement horizontale apparaîtra :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Voir aussi

la propriété word-break,
qui fait passer les lettres d'un mot long à la ligne suivante
la propriété overflow-wrap,
qui fait passer les lettres d'un mot long à la ligne suivante
la propriété overflow-x,
qui rogne les parties débordantes horizontalement
la propriété overflow-y,
qui rogne les parties débordantes verticalement