Débordement - Astuces CSS

La overflowpropriété contrôle ce qui arrive au contenu qui sort de ses limites: imaginez un divdans lequel vous avez explicitement défini une largeur de 200 pixels, mais contient une image de 300 pixels de large. Cette image sortira du div et sera visiblepar défaut. Alors que si vous définissez la overflowvaleur sur hidden, l'image sera coupée à 200 px.

div ( overflow: visible | hidden | scroll | auto | inherit )

Valeurs

• visible: le contenu n'est pas tronqué lorsqu'il sort de sa boîte. Il s'agit de la valeur par défaut de la propriété
• hidden: le contenu débordant sera masqué.
• scroll: similaire à caché sauf que les utilisateurs pourront faire défiler le contenu caché
• auto: si le contenu sort de sa boîte, ce contenu sera masqué tandis qu'une barre de défilement devrait être visible pour que les utilisateurs puissent lire le reste du contenu.
• initial: utilise la valeur par défaut qui est visible
• inherit: définit le débordement sur la valeur de son élément parent.

N'oubliez pas que le texte sera naturellement enveloppé à la fin d'un élément (à moins que l'espace blanc ne soit modifié), de sorte que le texte sera rarement la cause d'un débordement. À moins qu'une hauteur ne soit définie, le texte poussera également un élément plus haut. Le débordement entre en jeu plus fréquemment lorsque des largeurs et des hauteurs explicites sont définies et qu'il ne serait pas souhaitable que tout contenu déborde, ou lorsque le défilement est explicitement évité.

Visible

Si vous ne définissez pas du tout la propriété de débordement, la valeur par défaut est visible. Donc, en général, il n'y a aucune raison de définir explicitement cette propriété sur visible à moins que vous ne la remplaciez pour qu'elle soit définie ailleurs.

La chose importante à retenir ici est que même si le contenu est visible à l'extérieur de la boîte, ce contenu n'affecte pas le flux de la page. Par exemple:

En règle générale, vous ne devriez pas définir de hauteurs statiques sur des boîtes contenant du texte Web, donc cela ne devrait pas apparaître.

Caché

Le contraire du visible par défaut est masqué . Cela masque littéralement tout contenu qui s'étend au-delà de la boîte.

Ceci est particulièrement utile en cas d'utilisation avec du contenu dynamique et la possibilité d'un débordement causant de sérieux problèmes de mise en page. Cependant, gardez à l'esprit que le contenu masqué de cette manière est totalement inaccessible (à moins de voir la source). Ainsi, par exemple, un utilisateur a sa taille de police par défaut plus grande que ce à quoi vous vous attendiez, vous pouvez pousser le texte en dehors d'une boîte et le cacher complètement de sa vue.

Faire défiler

Définir la valeur de débordement d'une boîte pour faire défiler masquera le contenu du rendu en dehors de la boîte, mais offrira des barres de défilement pour faire défiler l'intérieur de la boîte pour afficher le contenu.

Il est à noter qu'avec cette valeur, vous obtenez les DEUX barres de défilement horizontales et verticales, peu importe quoi, même si le contenu ne nécessite que l'un ou l'autre.

Le défilement dynamique d'iOS peut être activé pour cette valeur avec -webkit-overflow-scrolling.

Remarque: dans OS X Lion, lorsque les barres de défilement sont définies pour ne s'afficher que lorsqu'elles sont utilisées, scrollse comporte davantage comme auto, en ce sens que seules les barres de défilement nécessaires s'affichent.

Auto

Le débordement automatique est très similaire à la valeur de défilement, mais il résout le problème de l'obtention de barres de défilement lorsque vous n'en avez pas besoin. Les barres de défilement n'apparaîtront que s'il y a du contenu qui sort réellement de l'élément.

overflow-x et overflow-y

Il est également possible de manipuler le débordement de contenu horizontalement ou verticalement avec les propriétés overflow-xet overflow-y. Par exemple, dans la démo ci-dessous, le débordement horizontal peut être parcouru tandis que le texte qui dépasse la hauteur de la boîte est masqué:

.box ( overflow-y: hidden; overflow-x: scroll; )

Effacement des flotteurs

L'une des utilisations les plus populaires de la définition du débordement, curieusement, est le nettoyage des flotteurs. Le réglage du débordement n'efface pas le flotteur au niveau de l'élément, il s'auto-efface. Cela signifie que l'élément avec débordement (toute valeur sauf visible) s'étendra aussi grand que nécessaire pour englober les éléments enfants à l'intérieur qui sont flottants (au lieu de se réduire), en supposant que la hauteur n'est pas déclarée. Comme ça:

Une meilleure technique de compensation des flottants est le clearfix, car il ne vous oblige pas à modifier la propriété de débordement d'une manière dont vous n'avez pas besoin.

Générer un contexte de formatage de bloc

Il est intéressant de noter que overflowcela créera également un nouveau contexte de formatage de bloc, ce qui est utile si nous voulons aligner un élément de bloc à côté d'un élément flottant. Dans l'exemple ci-dessous, nous montrons comment un certain nombre de paragraphes interagiront avec une image flottante par défaut, puis nous utilisons overflow: hiddenpour aligner le texte dans sa propre boîte:

Cela vient d'un excellent article de Nicole Sullivan qui a ensuite inspiré l'objet médiatique.

Les barres de défilement peuvent-elles être stylisées avec CSS?

Vous étiez capable de styliser les barres de défilement dans IE (v5.5?) Mais pas plus. Vous pouvez à nouveau les styliser dans les navigateurs WebKit. Si vous avez besoin de barres de défilement personnalisées pour plusieurs navigateurs, utilisez JavaScript.

Si un élément doit avoir des barres de défilement ajoutées pour honorer la valeur de débordement, Firefox les place en dehors de l'élément, en conservant la largeur / hauteur visible telle que déclarée. IE place les barres de défilement à l'intérieur, en conservant la largeur / hauteur totale déclarée.

Démo

Démos de cet article tirées de cette page d'exemple.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome	Firefox	C'EST À DIRE	Bord	Safari
91	87	11	88	TP

Mobile / tablette

Chrome Android	Android Firefox	Android	Safari sur iOS
88	85	81	14,0-14,4

En rapport

• La propriété float

Plus d'information

• Comprendre le Humble Clearfix
• Débordement: un avantage secret
• Débordement sur MDN
• Débordement sur W3C
• Trouver / réparer un débordement corporel involontaire