Débordement

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 41 sur 76.

En CSS, la propriété overflow contrôle ce qui arrive au contenu qui déborde de la boîte de son élément. Lorsque le contenu d’un élément est trop volumineux pour tenir dans la largeur et la hauteur spécifiées, la propriété overflow détermine s’il faut rogner le contenu, ajouter des barres de défilement ou afficher le contenu débordant à l’extérieur des limites de l’élément.

Voici la syntaxe de base pour utiliser la propriété overflow :

selector {
    overflow: value;
}

value : Le comportement de débordement souhaité, qui peut être l’un des suivants :

visible : Il s’agit de la valeur par défaut. Le contenu débordant est rendu à l’extérieur de la box de l’élément et peut chevaucher les éléments adjacents.

hidden : Le contenu qui déborde est tronqué et le reste du contenu est invisible.

scroll : ajoute des barres de défilement (à la fois horizontale et verticale) à l’élément, permettant aux utilisateurs de faire défiler le contenu qui déborde.

auto : Le navigateur détermine s’il doit ajouter des barres de défilement en fonction du contenu et de l’espace disponible. Généralement, les barres de défilement sont ajoutées uniquement lorsque cela est nécessaire.

Par exemple :

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Dans cet exemple, tous les éléments <div> d’une largeur de 200px et d’une hauteur de 100px auront des barres de défilement ajoutées pour afficher tout contenu débordant.

Vous pouvez également contrôler indépendamment le comportement de débordement dans les directions horizontale et verticale à l’aide des propriétés overflow-x et overflow-y :

.example {
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add a vertical scrollbar */
}

Défi

Facile

Un document HTML vous est fourni avec une division (<div>) qui contient un paragraphe (<p>) avec un long texte. Votre tâche consiste à utiliser la propriété overflow pour contrôler l’affichage du contenu qui déborde. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l’élément <div>. Définissez la width sur 300px, la height sur 150px et la border sur 1px solid black.
Définissez la propriété overflow de l’élément <div> sur scroll afin d’ajouter des barres de défilement à l’élément.

Essayez vous-même

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>