Système de design GCRaccourcis CSS
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Débordement

La classe overflow définit la propriété overflow. Elle détermine la façon dont le contenu est géré lorsqu’il déborde de sa boîte. Aperçu
Raccourci de classe CSS Style appliqué 
overflow-visible
 
overflow: visible;
 
overflow-x-visible
 
overflow-x: visible;
 
overflow-y-visible
 
overflow-y: visible;
 
overflow-hidden
 
overflow: hidden;
 
overflow-x-hidden
 
overflow-x: hidden;
 
overflow-y-hidden
 
overflow-y: hidden;
 
overflow-scroll
 
overflow: scroll;
 
overflow-x-scroll
 
overflow-x: scroll;
 
overflow-y-scroll
 
overflow-y: scroll;

Exemples

Visible
overflow-visible

Le contenu qui dépasse les limites de cet élément déborde horizontalement et verticalement. 
<div class="overflow-visible">
  Le contenu qui dépasse les limites de cet élément déborde
  horizontalement et verticalement.
</div>

Visible à l’horizontale (x)
overflow-x-visible

Le contenu qui dépasse les limites de cet élément déborde horizontalement. 

<div class="overflow-x-visible" style="width: 250px">
  <p style="width: 500px">
    Le contenu qui dépasse les limites de cet élément
    déborde horizontalement.
  </p>
</div>

Visible à la verticale (y)
overflow-y-visible

Le contenu qui dépasse les limites de cet élément déborde verticalement. 
<div class="overflow-y-visible">
  Le contenu qui dépasse les limites de cet élément déborde
  verticalement.
</div>

Masqué
overflow-hidden

Le contenu qui dépasse les limites de cet élément est invisible, mais est toujours lisible par les lecteurs d’écran. 

<p class="overflow-hidden">
  Le contenu qui dépasse les limites de cet élément est
  invisible, mais est toujours lisible par les lecteurs
  d’écran.
</p>

Masqué à l’horizontale (x)
overflow-x-hidden

Le contenu qui dépasse la limite de gauche ou de droite de cet élément est invisible, mais il est toujours lisible par les lecteurs d’écran. 

<div class="overflow-x-hidden" style="width: 250px">
  <p style="width: 500px">
    Le contenu qui dépasse la limite de gauche ou de droite
    de cet élément est invisible, mais il est toujours
    lisible par les lecteurs d’écran.
  </p>
</div>

Masqué à la verticale (y)
overflow-y-hidden

Le contenu qui dépasse la limite supérieure ou inférieure de cet élément est invisible, mais il est toujours lisible par les lecteurs d’écran. 

<p class="overflow-y-hidden">
  Le contenu qui dépasse la limite supérieure ou inférieure
  de cet élément est invisible, mais il est toujours lisible
  par les lecteurs d’écran.
</p>

Défilement
overflow-scroll

Le contenu qui dépasse les limites de cet élément est accessible au moyen de barres de défilement verticale et horizontale. 
<a href="#" class="overflow-scroll">
  Le contenu qui dépasse les limites de cet élément est
  accessible au moyen de barres de défilement verticale et
  horizontale.
</a>

Défilement à l’horizontale (x)
overflow-x-scroll

Le contenu qui dépasse les limites de cet élément est accessible au moyen d’une barre de défilement horizontale. 

<a href="#" class="overflow-x-scroll" style="width: 250px">
  <p style="width: 500px">
    Le contenu qui dépasse les limites de cet élément est
    accessible au moyen d’une barre de défilement
    horizontale.
  </p>
</a>

Défilement à la verticale (y)
overflow-y-scroll

Le contenu qui dépasse les limites de cet élément est accessible au moyen d’une barre de défilement verticale. 
<a href="#" class="overflow-y-scroll">
  Le contenu qui dépasse les limites de cet élément est
  accessible au moyen d’une barre de défilement verticale.
</a>
Style conditionnel Appliquer ces styles à des tailles d’écran précises Utilisez un préfixe de mise en page réactive pour appliquer cette classe uniquement à une taille d’écran précise. Voici les points d’arrêt possibles :
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:overflow-hidden ...">
  ...
</div>
En savoir plus sur le préfixe de mise en page réactive. 2025-10-01