Agencement CSS - Débordement

CSS overflow attribut contrôle la manière dont le contenu trop grand pour la zone ne pouvant pas l'accueillir est traité.

Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu. Ce texte est très long et son conteneur a une hauteur de seulement 100 pixels. Par conséquent, une barre de défilement a été ajoutée pour aider les lecteurs à faire défiler le contenu.

Essayer vous-même

CSS Overflow

overflow La propriété spécifie si le contenu doit être tronqué ou une barre de défilement ajoutée lorsque le contenu est trop grand pour être placé dans la zone spécifiée.

overflow La propriété peut être définie avec les valeurs suivantes :

  • visible - Par défaut. Le dépassement n'est pas tronqué. Le contenu est rendu en dehors du cadre de l'élément
  • hidden - Le dépassement est tronqué et le reste du contenu est invisible
  • scroll - Le dépassement est tronqué et une barre de défilement est ajoutée pour visualiser le reste du contenu
  • auto - Avec scroll Similaire, mais ajoute une barre de défilement uniquement lorsque nécessaire

Remarque :overflow La propriété ne s'applique qu'aux éléments en bloc ayant une hauteur spécifiée.

Remarque :Dans OS X Lion (sur Mac), la barre de défilement est masquée par défaut et n'apparaît que lors de son utilisation (même si "overflow:scroll" est défini).

overflow: visible

Par défaut, le dépassement est visible (visible) ce qui signifie qu'il ne sera pas tronqué mais rendu en dehors du cadre de l'élément :

Lorsque vous souhaitez mieux contrôler l'agencement, vous pouvez utiliser la propriété overflow. La propriété overflow spécifie ce qui se passe si le contenu dépasse le cadre de l'élément.

Exemple

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Essayer vous-même

overflow: hidden

Si vous utilisez hidden La valeur, le dépassement sera tronqué et le reste du contenu sera caché :

Lorsque vous souhaitez mieux contrôler l'agencement, vous pouvez utiliser la propriété overflow. La propriété overflow spécifie ce qui se passe si le contenu dépasse le cadre de l'élément.

Exemple

div {
  overflow: hidden;
}

Essayer vous-même

overflow: scroll

Si vous définissez la valeur sur scrollLe dépassement sera tronqué et une barre de défilement sera ajoutée pour permettre le défilement à l'intérieur du cadre. Notez que cela ajoutera une barre de défilement dans les directions horizontale et verticale (même si vous n'en avez pas besoin) :

Lorsque vous souhaitez mieux contrôler l'agencement, vous pouvez utiliser la propriété overflow. La propriété overflow spécifie ce qui se passe si le contenu dépasse le cadre de l'élément.

Exemple

div {
  overflow: scroll;
}

Essayer vous-même

overflow: auto

auto La valeur est similaire à scrollCependant, il ajoute une barre de défilement uniquement lorsque nécessaire :

Lorsque vous souhaitez mieux contrôler l'agencement, vous pouvez utiliser la propriété overflow. La propriété overflow spécifie ce qui se passe si le contenu dépasse le cadre de l'élément.

Exemple

div {
  overflow: auto;
}

Essayer vous-même

overflow-x et overflow-y

overflow-x Et overflow-y La propriété spécifie si le dépassement du contenu doit être géré horizontalement, verticalement (ou les deux) :

  • overflow-x Spécifiez comment traiter les bords gauche / droite du contenu.
  • overflow-y Spécifiez comment traiter les bords supérieur / inférieur du contenu.
Lorsque vous souhaitez mieux contrôler l'agencement, vous pouvez utiliser la propriété overflow. La propriété overflow spécifie ce qui se passe si le contenu dépasse le cadre de l'élément.

Exemple

div {
  overflow-x: hidden; /* Masquer la barre de défilement horizontale */
  overflow-y: scroll; /* Ajouter une barre de défilement verticale */
}

Essayer vous-même

Toutes les propriétés overflow CSS

propriété Description
overflow Définit ce qui se passe si le contenu dépasse la boîte de l'élément.
overflow-x Définit comment traiter les bords gauche/droite du contenu lorsque le contenu de l'élément dépasse sa zone de contenu.
overflow-y Spécifie comment traiter les bords supérieur/inferieur du contenu lorsque le contenu de l'élément dépasse sa zone de contenu.