Propriété CSS overflow
La propriété overflow définit le comportement du contenu qui déborde de la boîte de l’élément. Cette propriété fonctionne uniquement pour les éléments de bloc qui ont une hauteur spécifiée.
Elle indique si le contenu doit être rogné pour tenir dans la boîte ou si des barres de défilement doivent être ajoutées à l’élément.
C’est un raccourci pour les propriétés suivantes :
Le contenu déborde lorsque le conteneur a une height et une width définies.
La propriété overflow possède les valeurs suivantes :
- visible
- hidden
- scroll
- auto
- overlay
DANGER
La valeur "Overlay" est obsolète.
L’une des utilisations de overflow est l’effacement des flottants. Cependant, définir overflow n’efface pas le float sur l’élément. L’élément dont overflow a une valeur autre que "visible" s’étendra autant que nécessaire pour inclure les éléments enfants flottants à l’intérieur, à condition que la hauteur ne soit pas déclarée.
La propriété overflow peut également créer un contexte de formatage de bloc. Elle est utile dans les cas où l’on veut aligner un élément de bloc à côté d’un élément flottant.
| Initial Value | visible |
|---|---|
| Applies to | Block containers, flex containers and grid containers. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | Object.style.overflow = "auto"; |
Syntaxe
Syntaxe CSS de overflow
css
overflow: visible | hidden | scroll | auto | overlay | initial | inherit;Exemple de la propriété overflow avec la valeur "visible" :
Exemple de code CSS overflow
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: visible;
}
</style>
</head>
<body>
<h2>Exemple de propriété Overflow</h2>
<h3>overflow: visible</h3>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Résultat
Exemple de la propriété overflow avec la valeur "scroll" :
Exemple CSS overflow scroll
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Exemple de propriété Overflow</h2>
<h3>overflow: scroll</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Dans l’exemple suivant, la valeur appliquée coupe le contenu pour qu’il tienne dans la boîte.
Exemple de la propriété overflow avec la valeur "hidden" :
Exemple CSS overflow hidden
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Exemple de propriété Overflow</h2>
<h3>overflow: hidden</h3>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Exemple de la propriété overflow avec la valeur "auto" :
CSS overflow auto
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scroll {
width: 200px;
height: 300px;
border: 1px solid;
overflow: auto;
margin-bottom: 10px;
}
.scroll-x {
width: 200px;
height: 300px;
border: 1px solid;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 10px;
}
.scroll-y {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: auto;
margin-bottom: 10px;
}
.scroll>div {
width: 400px;
height: 50px;
background: #ccc;
}
.scroll-y>div {
width: 200px;
height: 50px;
background: #ccc;
}
.scroll-x>div {
width: 400px;
height: 50px;
background: #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Exemple avec la propriété Overflow</h1>
<h2>overflow overflow scroll auto</h2>
<div class="scroll">
<h2>Propriété Overflow </h2>
<div>
<h2>propriété overflow scroll</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h2>overflow overflow-x auto</h2>
<div class="scroll-x">
<h2>Propriété Overflow </h2>
<div>
<h2>propriété overflow scroll-x</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer.
</p>
</div>
<h2>overflow overflow-y auto</h2>
<div class="scroll-y">
<h2>Propriété Overflow </h2>
<div>
<h2>propriété overflow scroll-y</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. software like Aldus PageMaker including versions of Lorem Ipsum.but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>Exemple de la propriété overflow avec toutes les valeurs :
Exemple CSS overflow toutes les valeurs
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #eee;
width: 300px;
height: 200px;
overflow: scroll;
}
div.hidden {
background-color: #eee;
width: 300px;
height: 200px;
overflow: hidden;
}
div.auto {
background-color: #eee;
width: 300px;
height: 200px;
overflow: auto;
}
div.visible {
background-color: #eee;
width: 300px;
height: 200px;
overflow: visible;
}
div.overlay {
background-color: #eee;
width: 300px;
height: 200px;
overflow: overlay;
}
</style>
</head>
<body>
<h2>Exemple de propriété Overflow</h2>
<h3>overflow: scroll</h3>
<div class="scroll">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1 500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: hidden</h3>
<div class="hidden">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: auto</h3>
<div class="auto">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: visible</h3>
<div class="visible">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br />
<br />
<h3>overflow: overlay</h3>
<div class="overlay">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valeurs
| Value | Description | Play it |
|---|---|---|
| visible | Le contenu n’est pas rogné et s’affiche en dehors de la boîte de remplissage. C’est la valeur par défaut de cette propriété. | Play it » |
| hidden | Le contenu est rogné pour tenir dans la boîte de remplissage. | Play it » |
| scroll | La barre de défilement est ajoutée pour voir le reste du contenu. | Play it » |
| auto | Dépend du navigateur. Si le contenu déborde, une barre de défilement est ajoutée. | Play it » |
| overlay | Fonctionne comme auto, mais avec les barres de défilement dessinées au-dessus du contenu au lieu de prendre de la place. Cette valeur obsolète ne doit plus être utilisée, bien qu’elle puisse encore fonctionner. | Play it » |
| initial | Fait en sorte que la propriété utilise sa valeur par défaut. | Play it » |
| inherit | Hérite la propriété de l’élément parent. |
Practice
Que fait la propriété CSS overflow ?