Sommaire

Le débordement des Boîte:débordementboîtes

Dans une mise en page, il peut arriver que le contenu soit plus important que le conteneur. Par exemple, nous pouvons avoir une boîte ayant une hauteur parfaitement fixée contenant beaucoup plus de texte que ne peut afficher cette boîte. La Boîte:overflowpropriété overflow permet de décider ce qu’il faut faire pour l’affichage du texte en surplus. Voici les valeurs possibles :

  • hidden : le contenu en trop est masqué, sans possibilité de visualiser le texte qui déborde.

  • visible : le contenu en trop est visible et l’affichage ignore les restrictions de hauteur fixe de l’élément parent.

  • scroll : une barre de défilement s’affiche pour visualiser le texte qui déborde. 

Voici un exemple de ces trois possibilités :

<!doctype html> 
<html lang="fr"> 
<head> 
   <meta charset="UTF-8"> 
   <title>Titre de la page</title> 
   <style> 
       #un, #deux, #trois { 
           border: 1px solid #000 ; 
           width: 400px ; 
           height: 150px ; 
           margin-bottom: 50px ; 
       } 
       #un { 
          ...