overflow

Définit une valeur indiquant comment gérer le contenu de l’objet lorsque le contenu dépasse la hauteur ou la largeur de l’objet.

Syntaxe

{ overflow: sOverflow }

Valeurs possibles

sOverflow

Chaîne qui spécifie une des valeurs suivantes :

visible	Valeur par défaut. Le contenu n’est pas tronqué et aucune barre de défilement n’est ajoutée.
auto	Le contenu est tronqué et une barre de défilement n’est ajoutée que lorsque cela s’avère nécessaire.
hidden	Le contenu qui excède les dimensions de l’objet n’est pas affiché.
scroll	Le contenu est tronqué et des barres de défilement sont ajoutés même si la taille du contenu n’est pas supérieure aux dimensions de l’objet.

La propriété a pour valeur par défaut visible pour tous les objets, hormis la propriété textarea dont la valeur par défaut est auto . Cette propriété n’est pas héritée.

Remarques

La valeur par défaut de l’élément body est auto .

La définition de la propriété overflow sur la valeur hidden sur un objet textarea permet de masquer ses barres de défilement.

La définition de la propriété overflow sur la valeur visible permet de détourer le contenu en fonction de la taille de la fenêtre ou du cadre qui contient l’objet.

Exemples

L’exemple suivant utilise la propriété overflow pour gérer le contenu de l’objet. Cet exemple utilise un style intraligne pour s’ajuster automatiquement au dépassement de contenu lors du chargement de la page :

<div id=odiv style="width: 200px; height: 200px; overflow: auto;">
:
</div>

Dans cet exemple, l’utilisateur peut modifier de façon dynamique la propriété overflow d’un objet DIV en choisissant l’une des valeurs de dépassement possibles à partir d’un objet select  :

<script>
function SetOverflow(o, svalue )
{
    o.style.overflow = svalue ;
}
</script>

<div id="div1" 
    style="font-size:18pt;background-color:yellow;height:50px;width:75px">
The quick brown fox jumps over the lazy dog.
</div>

<select onchange="SetOverflow(div1,
    this.options[this.selectedIndex].text)">
<option selected>visible
<option>scroll
<option>hidden
<option>auto
</select>

Informations relatives aux normes

Cette propriété est définie dans Cascading Style Sheets (CSS), Level 2 (CSS2) (Feuilles de style en cascade (CSS), Niveau 2 (CSS2)) .

Applicable à

a, abbr, acronym, address, applet, b, bdo, big, blockquote, body, center, cite, code, col, colgroup, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, html, hn, i, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, ol, p, q, rt, ruby, s, span, sub, tt, u, ul, var, xmp

Voir aussi

Concepts

position