Dépassement

Lorsque le contenu dépasse son parent, vous pouvez le gérer de différentes manières. Vous pouvez faire défiler l'écran pour ajouter de l'espace, rogner les bords qui débordent, indiquer la coupure avec des points de suspension, et bien plus encore. Le débordement est particulièrement important à prendre en compte lors du développement d'applications pour téléphone et de plusieurs tailles d'écran.

Il existe deux options de découpage différentes dans CSS : text-overflow permet de gérer les lignes de texte individuelles, et les propriétés overflow permettent de contrôler le débordement dans le modèle de boîte.

Dépassement d'une seule ligne avec text-overflow

Utilisez la propriété text-overflow sur tout élément contenant un ou plusieurs nœuds de texte, par exemple un paragraphe, <p>. Il spécifie comment le texte s'affiche lorsqu'il ne tient pas dans l'espace disponible de l'élément. Tout le texte HTML visible sur une page se trouve dans des nœuds de texte. Pour utiliser text-overflow, vous avez besoin d'une seule ligne de texte non mise en forme. Vous devez donc également définir overflow sur hidden et disposer d'une valeur white-space qui empêche le retour à la ligne.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Utiliser des propriétés de débordement

Les propriétés de débordement sont définies sur un élément pour contrôler ce qui se passe lorsque ses enfants ont besoin de plus d'espace que celui dont il dispose. Cela peut être intentionnel, comme dans une carte interactive comme Google Maps, où un utilisateur fait un panoramique autour d'une grande image rognée à une taille spécifique. Cela peut également être involontaire, comme dans une application de chat où l'utilisateur saisit un long message qui ne tient pas dans la bulle de texte.

Vous pouvez considérer le débordement en deux parties. L'élément parent dispose d'un espace fortement contraint qui ne change pas. Vous pouvez considérer cela comme une fenêtre. Les éléments enfants sont des contenus qui nécessitent plus d'espace de la part du parent. Vous pouvez considérer cela comme ce que vous regardez à travers la fenêtre. La gestion du débordement permet de déterminer comment la fenêtre encadre ce contenu.

Défilement sur les axes vertical et horizontal

La propriété overflow-y contrôle le débordement physique le long de l'axe vertical de la fenêtre d'affichage de l'appareil, ce qui permet de faire défiler l'écran vers le haut et le bas.

La propriété overflow-x contrôle le débordement le long de l'axe horizontal de la fenêtre d'affichage de l'appareil, ce qui permet de faire défiler l'écran vers la gauche et la droite.

Propriétés logiques pour la direction de défilement

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

Les propriétés overflow-inline et overflow-block définissent le débordement en fonction de l'orientation du document et du mode d'écriture.

Raccourci overflow

L'abréviation overflow définit les styles overflow-x et overflow-y sur une seule ligne:

overflow: hidden scroll;

Si deux mots clés sont spécifiés, le premier s'applique à overflow-x et le second à overflow-y. Sinon, overflow-x et overflow-y utilisent la même valeur.

Valeurs

Examinons de plus près les valeurs et les mots clés disponibles pour les propriétés overflow.

overflow: visible (par défaut)
Sans définir la propriété, overflow: visible est la valeur par défaut pour le Web. Cela garantit que le contenu n'est jamais masqué par inadvertance et respecte les principes fondamentaux de "ne jamais masquer le contenu" ou de "mises en page sûres de mises en page précises".
overflow: hidden
Avec overflow: hidden, le contenu est rogné dans la direction spécifiée, et aucune barre de défilement n'est fournie pour l'afficher.
overflow: scroll
overflow: scroll permet aux utilisateurs de faire défiler le contenu à l'aide des barres de défilement. Même si le contenu ne déborde pas actuellement, les barres de défilement sont présentes. C'est un excellent moyen de réduire le décalage de mise en page à venir si un conteneur peut être à défilement à l'avenir, par exemple en fonction du redimensionnement, et de préparer visuellement l'utilisateur aux zones à défilement.
overflow: clip
Comme avec overflow: hidden, le contenu avec overflow: clip est rogné dans la zone de marge intérieure de l'élément. La différence entre clip et hidden est que le mot clé clip interdit également tout défilement, y compris le défilement programmatique.
overflow: auto
Enfin, la valeur la plus couramment utilisée, overflow: auto. Cela respecte les préférences de l'utilisateur et affiche les barres de défilement si nécessaire, mais les masque par défaut et attribue la responsabilité du défilement à l'utilisateur et au navigateur.

Défilement et débordement

De nombreux comportements overflow introduisent une barre de défilement, mais certains comportements et propriétés de défilement spécifiques peuvent vous aider à contrôler le défilement dans votre conteneur de débordement.

Défilement et accessibilité

Il est important de s'assurer que la zone à faire défiler peut être sélectionnée afin qu'un utilisateur de clavier puisse accéder à la zone à l'aide de la touche de tabulation, puis faire défiler l'écran à l'aide des touches fléchées.

Pour permettre à une zone de défilement d'accepter la sélection, ajoutez tabindex="0", un nom avec l'attribut aria-labelledby et un attribut role approprié. Exemple :

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Le CSS peut ensuite être utilisé pour indiquer que la zone est sélectionnée, à l'aide de la propriété outline pour donner un indice visuel indiquant qu'elle peut maintenant être défilée.

Dans Utiliser le CSS pour appliquer l'accessibilité, Adrian Roselli montre comment le CSS peut aider à éviter les régressions d'accessibilité. Par exemple, pour n'activer le défilement et ajouter l'indicateur de focus que si les attributs appropriés sont utilisés. Les règles suivantes ne rendent la zone de défilement cliquable que si elle possède un attribut tabindex, aria-labelledby et role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Positionnement de la barre de défilement dans le modèle de boîte

Les barres de défilement occupent de l'espace dans la zone de marge intérieure et peuvent se disputer l'espace si inline et non overlaid. Le module sur le modèle de boîte fournit plus d'informations sur cette source potentielle de décalage de mise en page.

root-scroller et implicit-scroller

Vous remarquerez peut-être que certains défileurs ont un comportement de balayage pour actualiser et d'autres comportements spéciaux, en particulier lorsque vous développez des applications mobiles et hybrides. Ce comportement de défilement se produit sur le scroller racine. Il n'y a jamais qu'un seul défileur racine sur une page. Par défaut, le documentElement est le scroller racine de la page. Toutefois, en modifiant l'élément qui est le scroller racine, les comportements spéciaux peuvent être appliqués à d'autres scrollers que le documentElement. Nous appelons ce nouveau scroller le scroller racine implicite.

Pour créer un scroller racine, vous pouvez utiliser la promotion de scroller en positionnant un conteneur en tant que fixe, en vous assurant qu'il couvre toute la fenêtre d'affichage et qu'il est en haut de l'indice Z avec un scroller. Cliquez ici pour découvrir un scroller racine par rapport à un scroller implicite imbriqué.

La vidéo montre un défileur racine avec un comportement de rebond et de nouvelles fonctionnalités de style,
, par rapport au défilement d'un défileur implicite sans comportement de défilement amélioré.

scroll-behavior

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 15.4.

Source

scroll-behavior vous permet d'activer le défilement contrôlé par le navigateur vers les éléments. Cela vous permet de spécifier la manière dont la navigation dans la page, comme .scrollTo() ou les liens, est gérée.

Cela est particulièrement utile avec prefers-reduced-motion pour spécifier le comportement de défilement en fonction des préférences de l'utilisateur.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

Si vous avez déjà atteint la fin d'une superposition modale, puis continué à faire défiler la page derrière la superposition, il s'agit du chaînage de défilement ou de la remontée vers le conteneur de défilement parent. La propriété overscroll-behavior vous permet d'empêcher le défilement en cas de dépassement de fuite dans un conteneur parent (appelé "chaîne de défilement").

Vérifier vos connaissances

Tester vos connaissances sur le débordement

Le débordement de texte et le débordement d'élément sont-ils identiques ?

faux
true

La propriété overflow accepte deux mots clés. Le premier mot clé correspond à quelle axe ?

horizontale
verticale

Quel espace du modèle de boîte les barres de défilement occupent-elles lorsqu'elles sont affichées et intégrées ?

zone de marge
zone de contenu
cadre de bordure
zone de marge intérieure

Quelle propriété utiliseriez-vous pour empêcher le défilement supplémentaire dans un défileur implicite imbriqué ?

scroll-padding
scroll-behavior
scroll-hint
overscroll-behavior
overscroll-effect

Ressources

Overflow And Data Loss In CSS de Smashing Magazine