Overflow

Fait partie de la section Styling with 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 grand 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: C'est la valeur par défaut. Le contenu qui déborde est rendu à l'extérieur de la boîte de l'élément et peut chevaucher les éléments adjacents.

hidden : Le contenu qui dépasse est rogné, et le reste du contenu est invisible.

scroll : Ajoute des barres de défilement (à la fois horizontales et verticales) à l'élément, permettant aux utilisateurs de faire défiler le contenu qui dépasse.

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 ne sont ajoutées que lorsque cela est nécessaire.

Par exemple :

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

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

Vous pouvez également contrôler le comportement de débordement pour les directions horizontale et verticale indépendamment en utilisant les propriétés overflow-x et overflow-y :

.example {
    overflow-x: hidden; /* Masquer le débordement horizontal */
    overflow-y: scroll; /* Ajouter une barre de défilement verticale */
}

Défi

Facile

On vous donne un document HTML 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 la manière dont le contenu qui déborde est affiché. Suivez les étapes ci-dessous :

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

Aide-mémoire

La propriété overflow contrôle ce qui arrive au contenu qui déborde de la boîte de son élément :

selector {
    overflow: value;
}

Valeurs d'overflow :

visible : Par défaut. Le contenu déborde à l'extérieur de la boîte de l'élément
hidden : Le contenu qui déborde est coupé et invisible
scroll : Ajoute des barres de défilement (horizontale et verticale)
auto : Le navigateur ajoute des barres de défilement uniquement si nécessaire

Exemple :

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

Contrôler le débordement horizontal et vertical indépendamment :

.example {
    overflow-x: hidden; /* Masquer le débordement horizontal */
    overflow-y: scroll; /* Ajouter une barre de défilement verticale */
}

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>