Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.

Qu'est-ce que 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é estvisible et c'est pour cela qu'on voit le contenu dépasser.

Contrôler le dépassement

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 valeurhidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

Avec la valeurscroll, 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 valeurauto, 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 queoverflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeurauto, 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 devisible créera un nouveau contexte de formatage de bloc.

Pour être tout à fait précis, la propriétéoverflow est unepropriété raccourcie pour les propriétésoverflow-x etoverflow-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 pouroverflow-x et la seconde pouroverflow-y. Dans l'exemple qui suit, seuleoverflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

Les propriétés relatives

Dans le guide surles modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentesblock-size etinline-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 etoverflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques »overflow-x etoverflow-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.

Gérer le dépassement

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.

Dépassement sur l'axe en ligne

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

Dépassement sur l'axe de bloc

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.

Résumé

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.