Overflow : défilement, découpage et automatique
Contrôlez le comportement du contenu lorsqu’il dépasse son conteneur avec les propriétés overflow.
Overflow : défilement, découpage et automatique est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu’est-ce que le débordement ?
Un débordement se produit lorsque le contenu d’un élément est plus grand que ses dimensions définies. La propriété overflow contrôle ce qui arrive à ce contenu excédentaire.
overflow: visible (Par défaut)
Par défaut, le contenu déborde et reste visible à l’extérieur de la boîte de l’élément. Cela peut entraîner un chevauchement avec les éléments frères ou faire sortir le contenu de la fenêtre d’affichage.
<div class="box">This text is long enough to spill outside the box edges visibly.</div>
overflow: hidden
overflow: hidden rogne tout contenu qui dépasse les limites de l’élément. Le contenu rogné n’est ni accessible ni défilable.
<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>
overflow: scroll
overflow: scroll affiche toujours des barres de défilement, même lorsque le contenu tient dans l’espace disponible. Utilisez cette valeur si vous souhaitez une interface cohérente quelle que soit la taille du contenu.
<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>
overflow: auto
overflow: auto n’affiche des barres de défilement que lorsque le contenu déborde réellement. Cette valeur est généralement préférable à scroll pour éviter une gouttière de barre de défilement inutile.
<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>
overflow: clip
overflow: clip ressemble à hidden, mais son comportement est plus strict : il ne crée pas de contexte de formatage de blocs et ne peut pas être parcouru avec JavaScript. C’est une solution idéale pour rogner le contenu sans risque pour les performances.
<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>
overflow-x et overflow-y
Contrôlez chaque axe indépendamment. Un schéma courant permet le défilement horizontal pour les contenus larges comme le code ou les tableaux :
<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>
Schéma de conteneur défilable
Pour créer un conteneur défilable, vous avez besoin à la fois d’une hauteur fixe et de overflow: auto ou scroll :
<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>
Contexte de mise en forme des blocs avec overflow
Définir overflow sur toute valeur autre que visible crée un contexte de mise en forme des blocs (BFC). Celui-ci contient les éléments flottants internes et empêche la fusion des marges de dépasser du conteneur.
Chaînage du défilement
Lorsqu’un conteneur défilable atteint sa limite de défilement, les événements de défilement peuvent être « enchaînés » au parent. Utilisez overscroll-behavior: contain pour empêcher cela.
<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>
text-overflow par rapport à overflow
text-overflow: ellipsis concerne le texte à l’intérieur d’un élément et nécessite overflow: hidden + white-space: nowrap pour fonctionner. overflow contrôle le comportement de débordement propre à l’élément.
Vérification rapide
Quelle valeur de overflow affiche les barres de défilement uniquement lorsque le contenu déborde réellement ?
Récapitulatif
overflow: hidden tronque le contenu. overflow: auto ajoute des barres de défilement uniquement lorsque cela est nécessaire (valeur recommandée). overflow: scroll affiche toujours les barres de défilement. overflow: clip tronque le contenu sans créer de nouveau contexte de mise en forme. Utilisez overflow-x/y pour contrôler chaque axe séparément.
Questions Fréquemment Posées
La leçon « Overflow : défilement, découpage et automatique » est-elle gratuite ?
Oui — le texte complet de « Overflow : défilement, découpage et automatique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Overflow : défilement, découpage et automatique » ?
Contrôlez le comportement du contenu lorsqu’il dépasse son conteneur avec les propriétés overflow. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Overflow : défilement, découpage et automatique » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Block, Inline et Inline-Block
- Visibilité et Display None
- Overflow : défilement, découpage et automatique
- Réinitialisation et normalisation CSS