Débordement CSS – Visible, Scroll, Auto ou Hidden ? La propriété Overflow expliquée

Dans ce tutoriel, nous allons parler d’une propriété CSS importante : la propriété overflow.

Elle nous aide à contrôler ce qui se passe lorsque le contenu d’un élément est trop grand pour tenir dans une zone. Dans ce cas, le contenu déborde dans une autre zone, soit horizontalement (axe X), soit verticalement (axe Y).

Nous allons examiner les valeurs suivantes de la propriété overflow et voir comment elles fonctionnent :

Comment utiliser la valeur visible

Il s’agit de la valeur par défaut que prend la propriété overflow si aucune valeur n’est spécifiée. Grâce à cette propriété, nous pouvons voir clairement notre contenu lorsqu’il déborde sur une autre zone.

Prenons les exemples suivants :

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis ! Obcaecati ipsam est accusantium quis quos minus veniam eaque ? Modi expedita mollitia et qui !

corps{
    arrière-plan : noir ;
}

div{
    hauteur : 200px ;
    largeur : 200px ;
    fond : blanc ;
}

p{
    couleur : vert ;
}

C’est assez basique. Nous avons donné à notre page une couleur de fond noire. Nous avons défini la couleur d’arrière-plan de notre élément div, qui fait office de conteneur, comme étant blanche. Il a une hauteur et une largeur de 200px chacune. Nous avons ensuite donné une couleur verte au texte de notre paragraphe.

Voici à quoi cela ressemble :

Screenshot--238-

Le texte s’insère confortablement dans le conteneur blanc sans en franchir les limites sur les deux axes. Mais ce n’est pas toujours le cas.

Voir aussi :  HTML Center Image - CSS Align Img Center Exemple

Vous pouvez être en train de travailler sur un projet et vous rendre compte qu’un morceau de texte traverse la frontière. C’est le cas ici :

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis ! Obcaecati ipsam est accusantium quis quos minus veniam eaque ? Modi expedita mollitia et qui ! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis ! Obcaecati ipsam est accusantium quis quos minus veniam eaque ? Modi expedita mollitia et qui ! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis ! Obcaecati ipsam est accusantium quis quos minus veniam eaque ? Modi expedita mollitia et qui !

Les styles CSS restent les mêmes. Regardez maintenant ce qui se passe avec le conteneur et le texte :

Screenshot--241-

Le texte ne peut pas tenir dans le conteneur blanc, il déborde donc et traverse la bordure du conteneur. Dans un projet réel, ce serait encore plus ennuyeux car le texte se superposerait à d’autres éléments de la page.

Nous sommes en mesure de voir le texte déborder dans une autre zone car la valeur par défaut ici est visible, même si nous ne l’avons pas spécifié.

Continuons et ajoutons cela à notre CSS afin de voir la propriété de débordement appliquée :

body{
    arrière-plan : noir ;
}

div{
    hauteur : 200px ;
    largeur : 200px ;
    fond : blanc ;
    overflow : visible ;
}

p{
    couleur : vert ;
}

Nous avons ajouté overflow : visible ; à la div. Le résultat reste le même : notre texte déborde dans une autre zone.

Voir aussi :  Les 5 grands framework CSS de 2022

Dans la prochaine section, nous verrons les différentes valeurs qui peuvent nous aider à contrôler ce qui se passe lorsque le contenu déborde.

Comment utiliser la valeur cachée

Avec la valeur cachée, la partie du texte qui a débordé sera coupée – elle sera « invisible ». Vous n’avez pas à vous soucier de l’espace que le débordement occupait. Une fois que le contenu a été découpé, il ne se trouve plus dans la zone où il a débordé.

Nous allons examiner un exemple avant d’expliquer pourquoi ce n’est pas la meilleure solution. Ajoutons la valeur cachée:

body{
    arrière-plan : noir ;
}

div{
    hauteur : 200px ;
    largeur : 200px ;
    fond : blanc ;
    overflow : hidden ;
}

p{
    couleur : vert ;
}

Voici ce qui arrive au texte dans le conteneur :

Screenshot--243-

Comme vous pouvez le constater, nous ne pouvons plus voir la partie du texte qui traverse la frontière du conteneur.

Cela résout le problème de la présence de contenu dans une zone où il n’est pas censé se trouver, mais ne permet pas d’accéder au contenu qui a été coupé. Nous aborderons donc ce point dans la prochaine section.

Nous savons donc déjà que la valeur hidden coupe le texte et le cache. Mais la valeur scroll coupe également le texte et fournit une barre de défilement pour que nous puissions faire défiler et voir la partie du texte qui a été coupée.

Voyons cela :

body{
    arrière-plan : noir ;
}

div{
    hauteur : 200px ;
    largeur : 200px ;
    fond : blanc ;
    overflow : scroll ;
}

p{
    couleur : vert ;
}
Screenshot--244-

Nous avons maintenant des barres de défilement sur les deux axes. La barre de défilement horizontale n’est pas pertinente pour nous car nous n’avons pas de contenu débordant dans cette direction. Nous allons régler ce problème dans la section suivante.

Voir aussi :  Style des boutons CSS - survol, couleur et arrière-plan

Comment utiliser la valeur auto

body{
    arrière-plan : noir ;
}

div{
    hauteur : 200px ;
    largeur : 200px ;
    fond : blanc ;
    overflow : auto ;
}

p{
    couleur : vert ;
}
Screenshot--245-

La barre de défilement n’apparaît plus que verticalement. La valeur auto détecte où le débordement se produit et ajoute une barre de défilement dans cette direction.

Aucune barre de défilement n’a été ajoutée horizontalement parce que nous n’avons pas de débordement de contenu sur cet axe. De même, si nous n’avons pas de débordement sur les deux axes, aucune barre de défilement ne sera ajoutée.

propriétésoverflow-x et overflow-y

Dans les exemples utilisés dans les sections précédentes, nous avons utilisé la propriété overflow. Celle-ci s’applique à l’axe horizontal et à l’axe vertical. Si vous préférez vérifier le débordement séparément, vous pouvez utiliser ces propriétés :

  • overflow-x indique ce qui se passe lorsque le contenu déborde horizontalement (de gauche à droite).
  • overflow-y spécifie ce qui se passe lorsque le contenu déborde verticalement (de haut en bas).

Les mêmes valeurs – visible, hidden, scroll et auto – peuvent être utilisées ici aussi.

Un exemple rapide :

div {
  overflow-x : hidden ; /* le débordement est visible sur l'axe x */
  overflow-y : scroll ; /* la barre de défilement est ajoutée lorsqu'il y a débordement sur l'axe des y */
}

Conclusion

Dans ce tutoriel, nous avons appris à contrôler le débordement du contenu de nos pages. Nous avons vu les différentes valeurs que nous pouvons attribuer à la propriété overflow et les différents résultats que ces valeurs produisent.

Enfin, nous avons appris à appliquer les valeurs de la propriété overflow uniquement dans le sens horizontal ou vertical.

Bon codage !