Cours CSS / overflow, retour à la ligne et points de suspension

La propriété overflow contrôle le contenu qui dépasse d'une boîte, mais elle ne choisit pas à elle seule une stratégie utile de retour à la ligne du texte. Combinez un comportement de débordement délibéré avec des règles de retour à la ligne, et utilisez les points de suspension uniquement lorsque les lecteurs peuvent toujours accéder à l'information complète.

Comparez les valeurs de débordement avec un contenu identique

L’apparence des barres de défilement dépend du système d’exploitation et du navigateur, notamment de leurs réglages de superposition. scroll ne garantit donc pas une barre toujours visible. Un conteneur en overflow: hidden peut encore défiler par script ou lors du déplacement du focus : le contenu reste présent. La valeur clip empêche le défilement et se distingue de hidden. Consultez la documentation MDN sur overflow. Avant de masquer un dépassement, examinez aussi la largeur, la hauteur et box-sizing afin de choisir une hauteur adaptée au contenu.

Si le texte général est traité comme ayant une hauteur fixe et est caché, des informations peuvent disparaître lors de l'ajout de phrases, de la traduction ou de l'agrandissement des caractères. Il faut d'abord envisager de laisser la hauteur s'adapter au contenu, et utiliser auto si des restrictions de taille sont nécessaires, par exemple dans un panneau séparé. L'exemple complet place quatre phrases identiques dans la même boîte de 96px et compare uniquement les valeurs. Après la partie visible, nous avons laissé un peu d'espace supplémentaire pour la pratique afin que le texte débordant n'obscurcisse pas l'explication suivante.

Autoriser le retour à la ligne des URL et identifiants longs

.url { overflow-wrap: anywhere; }

Les URL sans espaces, les codes d'identification ou les longs mots peuvent pousser la boîte vers l'extérieur car il n'y a pas assez d'endroits pour les sauts de ligne. overflow-wrap: anywhere offre la possibilité d'un saut de ligne au milieu de la chaîne si nécessaire. Il ne supprime pas le caractère lui-même ni n'insère de caractère de saut de ligne dans la valeur de la chaîne. Seul l’affichage change, donc vous pouvez conserver la chaîne originale.

Appliquer word-break: break-all partout peut casser inutilement les mots ordinaires. Commencez par autoriser les sauts dans les zones contenant des chaînes longues. Flexbox et Grid peuvent également imposer des tailles minimales automatiques, donc examinez séparément l'objet concerné min-width. Le retour à la ligne du texte et la possibilité pour sa boîte de rétrécir résolvent différentes parties du problème. Pour plus de détails, voir la documentation MDN sur overflow-wrap, Alignement Flexbox, retour à la ligne, gap, grow et shrink.

Réunir les conditions du texte tronqué sur une ligne

.title {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

text-overflow en soi ne détermine pas la taille de la boîte ni les sauts de ligne. L’abréviation sur plusieurs lignes est également une méthode distincte de cet exemple sur une seule ligne. L’exemple complet apparaît dans le paragraphe ci-dessous avec le titre complet afin que vous puissiez relire le texte tronqué. Ne masquez pas le contenu qui nécessite le texte original, comme des instructions importantes ou des messages d’erreur, sans moyen de le vérifier ailleurs. Nous recommandons de ne pas utiliser l’infobulle de l’attribut title comme seule source de texte. Consultez la documentation MDN sur text-overflow.

Rendre accessibles au clavier les panneaux défilables

<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
  <p>Notice content</p>
</div>

Selon le navigateur, la zone de défilement peut ou non recevoir automatiquement le focus clavier. En spécifiant tabindex="0" pour le panneau auquel vous devez accéder, vous pouvez y naviguer dans l'ordre normal de tabulation. role="region" et un nom descriptif aident les utilisateurs de technologies d'assistance à comprendre dans quelle région ils se trouvent. Il n’est pas nécessaire de rendre chaque boîte focalisable ou de lui attribuer le rôle region.

L'exemple donne l'accès au clavier, un nom et un contour de focus uniquement aux panneaux auto et scroll, qui nécessitent réellement un défilement. Après être entré avec Tab, vérifiez si vous pouvez vous déplacer jusqu'au dernier paragraphe en utilisant les touches fléchées ou Page Down. Sur les écrans étroits, assurez-vous également qu'il y a une distinction entre le défilement à l'intérieur du panneau et le défilement de la page.

Exécutez l'exemple complet de débordement

Enregistrez et ouvrez le code ci-dessous en UTF-8 dans overflow.html. Comprend les quatre panneaux du même contenu, des URL longues et des titres raccourcis pour préserver le texte original. L’adresse example.com sert à observer les possibilités de retour à la ligne et n'est pas un lien de ressource réel.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing overflowing content</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
      border: 2px solid #777; background: #eef6fa; }
    .panel p { margin: 0 0 8px; }
    .visible { overflow: visible; }
    .visible-stage { padding-bottom: 240px; }
    .hidden { overflow: hidden; }
    .auto { overflow: auto; }
    .scroll { overflow: scroll; }
    .panel:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    .url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
    .title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .original { max-width: 320px; }
  </style>
</head>
<body>
  <h1>Overflow and truncation</h1>
  <section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
  <h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
  <p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>

1. Comparez les derniers paragraphes des quatre panneaux. Dans visible, il apparaît en dehors de la bordure, dans hidden, il est caché, et dans auto et scroll, faites défiler le contenu à l’intérieur du panneau pour le lire.
2. Laissez un seul paragraphe dans le panneau auto. Lorsque le contenu devient suffisamment court, vérifiez si l'espace de défilement disparaît et restaurez-le à quatre paragraphes. Ne jugez pas si le contenu déborde simplement en voyant la barre.
3. Déplacez-vous vers le panneau automatique avec Tab et vérifiez le contenu ci-dessous avec les touches fléchées. Assurez-vous que le contour du focus est visible, puis utilisez Shift+Tab pour passer à l’élément précédent.
4. Désactivez les déclarations overflow-wrap dans les URL et rétrécissez la fenêtre. Vérifiez si la chaîne longue déborde horizontalement, puis rétablissez overflow-wrap: anywhere.
5. Remplacez uniquement text-overflow: ellipsis par text-overflow: clip dans la règle .title et comparez les résultats de la coupure sans les points de suspension. Ensuite, changez nowrap en normal pour vérifier le résultat du retour à la ligne et remettez-le à la valeur d'origine.

Si toute la page est poussée horizontalement, vérifiez la largeur/padding minimum de l'élément le plus large et de son parent. Si le contenu à lire disparaît, vérifiez d’abord la hauteur fixe et la déclaration overflow: hidden. Avant d'ajouter un défilement ou des points de suspension, vous devez déterminer comment préserver le texte original et s'il peut être manipulé.