La propriété CSS overflow et l'alignement
La propriété overflow détermine comment sera affiché le contenu d'un élément quand il dépasse les limites de celui-ci, et l'affichage éventuel d'une barre de défilement.
Cela peut arriver lorsque la propriété width limite la taille de la boite et que son contenu excède cette taille. Lorsque un positionnement absolu ou négatif place le contenu hors du conteneur. Ou tout autre cas.
Valeurs de la propriété
- visible
- Le contenu est affiché selon le flux normal et peut dépasser le cadre du conteneur. C'est la valeur par défaut.
- hidden
- Le contenu est tronqué et la partie qui dépasse n'est pas affichée.
- scroll
- Le contenu est tronqué, mais une barre de défilement apparaît pour permettre de l'afficher.
- auto
- Une barre de défilement apparaît seulement quand le contenu est tronqué.
- inherit
- La valeur de la propriété est la même que pour le conteneur.
Exemples
Feuille de style:
.demo
{
overflow:hidden;
}JavaScript:
instance.style.overflow="hidden";Alignement vertical
Les blocs conteneurs sont supposés avoir une forme rectangulaire, donc ce qui se situe hors de l'alignement est en dépassement de capacité. En outre ce qui sort de l'alignement quand on le cache par la propriété "hidden", est quand même affiché mais dans le cadre.
La propriété overflow:hidden confine donc le contenu dans le conteneur rectangulaire, ce qui n'est pas le cas par défaut.
L'exemple ci-dessous, qui fonctionne avec tous les navigateurs, en fait la démonstration.
Grappe de raisins
Ceci n'est pas une grappe de raisins.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc...
Le code source
Le code HTML dans le premier cas:
<img src="https://www.xul.fr/images/orange.jpg" class="thumbnail" />
<div class="comment">
<h4>Orange</h4>
<p>
Ceci n'est pas une orange (c'est l'image d'une orange).<br>
Etc...
</p>
</div>L'image est suivie dans le code source par un <div> auquel la feuille de style applique la propriété overflow:hidden.
Le code CSS:
.thumbnail
{
float: left;
margin: 8px 16px 8px 4px;
}
.comment
{
overflow: hidden;
} L'image a la propriété float:left et une marge, sans plus.
Le code HTML dans un second cas:
<img src="https://www.xul.fr/images/grape.jpg" class="thumbnail" />
<h4>Grappe de raisins</h4>
<p class="comment">
Ceci n'est pas une grappe de raisins.<br>
Etc...
</p>On n'utilise pas de <div> ici, la propriété overflow est appliquée au paragraphe et cela produit le même résultat.
Si les images ont des largeurs différentes, et que l'on veuille aligner les textes sur une même ligne verticale, on peut spécifier une largeur aux images et dans ce cas elles seront redimensionnées pour avoir toutes cette même largeur.
Exemple:
.thumbnail
{
float: left;
margin: 8px;
width:260px;
}
Orange
Ceci n'est pas une orange (c'est l'image d'une orange).
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc...