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 (ne fonctionne pas avec Internet Explorer avant IE9).

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 est exclut de l'affichage mais le contenu lui-même n'est pas caché, il est positionné dans l'alignement.
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 (Internet Explorer depuis la version 7), 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="http://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="http://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;
}

Référence

• Le modèle de mise en forme visuel de CSS 2.0.

© 2011 Xul.fr