CSS
Débordement
Recherche…
Syntaxe
- débordement: visible | caché | défiler | auto | initiale | hériter;
Paramètres
Valeur de Overflow | Détails |
|---|---|
visible | Affiche tout le contenu débordant en dehors de l'élément |
scroll | Masque le contenu débordant et ajoute une barre de défilement |
hidden | Masque le contenu débordant, les deux barres de défilement disparaissent et la page devient fixe |
auto | Identique au scroll si le contenu déborde, mais n'ajoute pas de barre de défilement si le contenu est adapté |
inherit | Hériter la valeur de l'élément parent pour cette propriété |
Remarques
Lorsqu'un élément est trop petit pour afficher son contenu, que se passe-t-il? Par défaut, le contenu ne fera que déborder et s'afficher en dehors de l'élément. Cela rend votre travail mal en point. Vous voulez que votre travail soit beau, vous devez donc définir la propriété de débordement pour gérer le contenu débordant de manière souhaitable.
Les valeurs de la propriété overflow sont identiques à celles des propriétés overflow-x et overflow-y , sauf qu'elles s'appliquent le long de chaque axe
La propriété overflow-wrap a également été appelée propriété de word-wrap .
Remarque importante: L' utilisation de la propriété de débordement avec une valeur différente de visible crée un nouveau contexte de mise en forme de bloc.
débordement: défilement
HTML
<div>
This div is too small to display its contents to display the effects of the overflow property.
</div>
CSS
div {
width:100px;
height:100px;
overflow:scroll;
}
Résultat
Le contenu ci-dessus est découpé dans une boîte de 100 x 100 pixels, avec le défilement disponible pour afficher le contenu débordant.
La plupart des navigateurs de bureau affichent des barres de défilement horizontales et verticales, que le contenu soit tronqué ou non. Cela peut éviter des problèmes avec les barres de défilement apparaissant et disparaissant dans un environnement dynamique. Les imprimantes peuvent imprimer un contenu débordant.
débordement
overflow-wrap indique à un navigateur qu'il peut casser une ligne de texte à l'intérieur d'un élément ciblé sur plusieurs lignes dans un endroit incassable. Utile pour empêcher une longue chaîne de texte causant des problèmes de mise en page dus au débordement de son conteneur.
CSS
div {
width:100px;
outline: 1px dashed #bbb;
}
#div1 {
overflow-wrap:normal;
}
#div2 {
overflow-wrap:break-word;
}
HTML
<div id="div1">
<strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>
<div id="div2">
<strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>
overflow-wrap - Valeur | Détails |
|---|---|
normal | Permet un dépassement de mot s'il est plus long que la ligne |
break-word | Séparera un mot en plusieurs lignes, si nécessaire |
inherit | Hérite la valeur de l'élément parent pour cette propriété |
débordement: visible
HTML
<div>
Even if this div is too small to display its contents, the content is not clipped.
</div>
CSS
div {
width:50px;
height:50px;
overflow:visible;
}
Résultat
Le contenu n'est pas tronqué et sera rendu hors de la zone de contenu s'il dépasse sa taille de conteneur.
Contexte de mise en forme de bloc créé avec un dépassement de capacité
L'utilisation de la propriété overflow avec une valeur différente de visible créera un nouveau contexte de mise en forme de bloc . Ceci est utile pour aligner un élément de bloc à côté d'un élément flottant.
CSS
img {
float:left;
margin-right: 10px;
}
div {
overflow:hidden; /* creates block formatting context */
}
HTML
<img src="http://placehold.it/100x100">
<div>
<p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
<p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>
Résultat
Cet exemple montre comment les paragraphes d'un div avec le jeu de propriétés de overflow interagiront avec une image flottante.
débordement-x et débordement-y
Ces deux propriétés fonctionnent de la même manière que la propriété overflow et acceptent les mêmes valeurs. Le paramètre overflow-x ne fonctionne que sur l'axe x ou de gauche à droite. Le overflow-y fonctionne sur l'axe y ou de haut en bas.
HTML
<div id="div-x">
If this div is too small to display its contents,
the content to the left and right will be clipped.
</div>
<div id="div-y">
If this div is too small to display its contents,
the content to the top and bottom will be clipped.
</div>
CSS
div {
width: 200px;
height: 200px;
}
#div-x {
overflow-x: hidden;
}
#div-y {
overflow-y: hidden;
}