Quand utiliser la propriété overflow (hidden, auto, visible, scroll) ?

Gérer les dépassements sur les blocs

La propriété css overflow

On utilise la propriété overflow pour gérer le comportement, en cas de dépassement des éléments html au sein d’un bloc, dont on a précisé la taille avec les propriétés css width ou height et qui ne sont pas de type inlign. Cela permet en fait d’attribuer un comportement à un élément html au cas où son contenu  dépasse sa taille.

Les différentes valeurs à utiliser :

  • visible : C’est la valeur par défaut. Cela signifie que si le texte dépasse la taille spécifiée, la boîte s’élargit de manière à ce que tout soit visible; le contenu n’est pas rogné
  • hidden : Cela permet de garder la dimension de la boîte et de masquer la partie de texte qui dépasse. Le contenu est rogné et aucune barre de défilement n’est affichée.
  • scroll : Le texte sera caché s’il dépasse les limites. Sauf que le navigateur mettra en place des barres de défilement pour qu’on puisse voir tout le texte. Il met des barres de défilement verticales et horizontales même si on n’en a pas forcément besoin.Le contenu est rogné et les navigateurs de bureau affichent des barres de défilement dans tous les cas. Cela évite d’avoir des barres qui apparaissent et disparaissent sans cesse avec du contenu dynamique. Les imprimantes peuvent éventuellement imprimer le contenu qui dépasse.
  • auto : Le navigateur mettra les barres de défilement seulement s’il juge cela nécessaire.Les navigateurs comme Firefox affichent des ascenseurs si le contenu dépasse.
  • inherit
  • initial

visuel démonstration de la propriété overflow
On peut aussi définir uniquement le comportement horizontal ou vertical avec les propriétés overflow-x et overflow-y.

La propriété css overflow-wrap

Egalement, la propriété CSS3 overflow-wrap  qui a remplacé la propriété CSS2 word-wrap spécifie au navigateur qu’il peut faire une césure sur un mot afin d’éviter les débordements du texte de son conteneur.

Les valeurs à utiliser  :

normal; : ne coupe jamais un mot. Valeur par défaut.
break-word; : force le retour à la ligne en coupant les mots tout seul.
inherit;
initial;
unset;

Compatibilité navigateur Firefox Mozilla

 

 

VOIR AUSSI
Partagez ce contenu !Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone
Votes sur cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *