La disposition en flux et le dépassement

Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :

Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété overflow. La valeur initiale de cette propriété est visible et c'est pour cela qu'on voit le contenu dépasser.

La propriété overflow possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur hidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

Avec la valeur scroll, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.

Avec la valeur auto, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que overflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur auto, seules les barres de défilement nécessaires sont ajoutées.

Comme nous l'avons vu plus tôt, toute valeur qui est différente de visible créera un nouveau contexte de formatage de bloc.

Pour être tout à fait précis, la propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour overflow-x et la seconde pour overflow-y. Dans l'exemple qui suit, seule overflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

Dans le guide sur les modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentes block-size et inline-size qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : overflow-block et overflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques » overflow-x et overflow-y où la correspondance varie en fonction du mode d'écriture du document.

À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.

Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.

La propriété text-overflow indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur clip qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur ellipsis permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.

Il existe également une proposition pour une propriété block-overflow. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.

Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.

Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.