Propriété overflow

La propriété overflow indique au navigateur comment traiter le contenu (texte, images, autres blocs) qui dépasse des limites du bloc (sa largeur ou sa hauteur). Le navigateur peut masquer la partie débordante, ajouter des barres de défilement ou ne rien faire (laisser tel quel - débordant des limites).

Syntaxe

csssélecteur {
  overflow: hidden | scroll | auto | visible;
}

Valeurs

Valeur par défaut : visible.

Exemple . Valeur visible

Dans cet exemple, un mot très long ne tiendra pas dans le conteneur et dépassera de ses limites. Aucun écrêtage ne se produit :

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

Exemple . Valeur visible

Maintenant, la hauteur est également limitée (le texte dépassera du bloc en hauteur également) :

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Exemple . Valeur hidden

Maintenant, tout ce qui dépasse des limites du conteneur sera simplement rogné (en hauteur aussi). Veuillez noter que l'écrêtage en hauteur ne se produit que lorsque celle-ci est explicitement définie. Dans le cas contraire, le texte étend le conteneur en hauteur - et aucun écrêtage n'aura lieu :

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

Exemple . Valeur scroll

Avec la valeur scroll, les barres de défilement seront toujours présentes, même si rien ne dépasse (dans ce cas, elles seront inactives). Actuellement, le texte ne dépasse ni en largeur, ni en hauteur, mais les barres de défilement sont tout de même là (inactives) :

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Exemple . Valeur auto

Avec la valeur auto, les barres de défilement sont ajoutées uniquement si le contenu dépasse du conteneur. Actuellement, elles sont absentes, car tout tient :

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Exemple . Valeur auto

Maintenant, limitons la largeur - une barre de défilement horizontale apparaîtra :

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

Voir aussi