Débordement de texte CSS : ellipsis, line clamp et coupure des mots
Labo CSS de débordement et de troncature de texte
Débordement de texte CSS : ellipsis, line clamp, word-break | We.Inc
Redimensionnez une boîte contenant une longue URL et un mot composé allemand, puis testez en direct overflow, text-overflow: ellipsis, line clamp, word-break, overflow-wrap et hyphens, avec les classes Tailwind.
Un contenu long sort de sa boîte quand la boîte est trop petite. overflow décide du sort de l'excédent : visible, hidden, clip, scroll ou auto. Pour une seule ligne terminée par des points de suspension, combinez white-space: nowrap, overflow: hidden et text-overflow: ellipsis. Pour plusieurs lignes, utilisez -webkit-line-clamp. Pour couper les mots insécables, utilisez overflow-wrap: anywhere.
La boîte a besoin de sa propre barre de défilement
overflow: auto
Faites glisser le curseur de largeur et la boîte d'exemple se resserre autour d'une vraie adresse web, du mot Donaudampfschifffahrtsgesellschaft et d'une phrase normale. Chaque option de débordement, de retour à la ligne et de limitation de lignes est un bouton, le résultat est instantané, et le CSS nécessaire est écrit en dessous.
Choisissez le texte d'exemple à charger : une URL, un long mot composé ou un paragraphe.
Faites glisser le curseur de largeur jusqu'à ce que le texte ne tienne plus.
Essayez une à une les valeurs d'overflow, l'ellipsis, un line clamp et les options de coupure des mots.
Copiez le CSS qui correspond au résultat qui vous plaît.
L'ellipsis exige à la fois nowrap, un overflow autre que visible et une largeur limitée. S'il en manque un seul, aucun point ne s'affiche.
Dans une rangée flex, un enfant tronqué a aussi besoin de min-width: 0, car par défaut les éléments flex refusent de rétrécir en dessous de leur contenu.
Placez le texte complet dans un attribut title ou affichez-le au focus, car la troncature cache des mots aux personnes qui ne peuvent pas survoler.
hyphens: auto ne coupe avec un trait d'union que si l'élément ou un parent a un attribut lang pour lequel le navigateur dispose d'un dictionnaire.
Questions fréquentes
Pourquoi text-overflow: ellipsis ne fonctionne-t-il pas ?
En général, un de ses partenaires manque. L'élément doit être de type bloc ou inline-block avec une largeur contrainte, avoir overflow réglé sur hidden ou clip, et garder le texte sur une ligne avec white-space: nowrap. Dans un élément flex ou grid, ajoutez aussi min-width: 0 pour que l'élément puisse rétrécir.
line-clamp est-il pris en charge sans le préfixe -webkit- ?
La forme préfixée, -webkit-line-clamp avec display: -webkit-box et -webkit-box-orient: vertical, fonctionne dans tous les principaux navigateurs actuels et c'est ce que génère Tailwind. La propriété line-clamp sans préfixe de CSS Overflow Level 4 est encore en cours de déploiement, donc vérifiez caniuse avant de compter uniquement sur elle.
Quelle est la différence entre word-break et overflow-wrap ?
overflow-wrap ne coupe un mot que s'il déborderait autrement, donc les mots normaux reviennent à la ligne normalement. word-break: break-all permet au navigateur de couper entre deux lettres n'importe où, ce qui donne un texte irrégulier et difficile à lire. word-break: keep-all sert pour le chinois, le japonais et le coréen, quand vous ne voulez pas de coupure à l'intérieur des mots.
Que fait overflow: clip que hidden ne fait pas ?
Les deux coupent l'excédent. hidden crée quand même un conteneur de défilement, donc un script peut le faire défiler et cela influe sur position: sticky à l'intérieur. clip interdit tout défilement, et avec overflow-clip-margin vous pouvez laisser le contenu dépasser de quelques pixels avant la coupure.
Comment tronquer du texte dans une cellule de tableau ?
Mettez table-layout: fixed sur le tableau et une largeur sur les colonnes, puis appliquez à la cellule le trio habituel nowrap, hidden et ellipsis. Sans disposition fixe, la colonne s'élargit simplement pour contenir le texte. Une autre option est max-width: 0 avec width: 100% sur la cellule.
Les cinq valeurs d'overflow
visible est la valeur par défaut et laisse le contenu s'afficher hors de la boîte sans affecter la mise en page autour. hidden et clip le coupent au bord du padding. scroll affiche toujours les barres de défilement, même quand rien ne déborde, et auto ne les affiche que si nécessaire, ce qui est presque toujours le meilleur choix.
overflow est un raccourci pour overflow-x et overflow-y. Régler un axe sur visible et l'autre sur hidden ne fonctionne pas comme écrit : le navigateur calcule visible comme auto dans cette combinaison, donc une barre de défilement inattendue peut apparaître. clip est l'exception et peut se combiner avec visible.
Couper les mots qui ne tiennent pas
overflow-wrap: break-word coupe les mots longs si nécessaire mais ne laisse pas la boîte rétrécir sous le mot le plus long, donc elle peut encore déborder dans les éléments flex et les tableaux. overflow-wrap: anywhere réduit aussi cette taille minimale, c'est pourquoi il règle le problème des longues URL dans les barres latérales étroites.
hyphens: auto insère un trait d'union à une frontière de syllabe correcte pour les langues que le navigateur prend en charge, ce qui rend le texte allemand et néerlandais justifié ou étroit bien plus lisible. Certaines versions de Safari ne comprennent que -webkit-hyphens, donc écrivez les deux. Utilisez hyphens: manual et le trait d'union conditionnel ­ quand vous voulez choisir vous-même les points de coupure.
Troncature et accessibilité
Le texte coupé reste dans la page, donc les lecteurs d'écran le lisent en entier, ce qui est une bonne chose. Ce sont les utilisateurs voyants au clavier ou au tactile qui y perdent, car ils ne peuvent pas survoler pour voir une infobulle.
Pour les noms de produits ou les messages importants, proposez un moyen de déplier le texte, comme un bouton Afficher plus ou un élément details, au lieu de compter uniquement sur l'ellipsis. Réservez les line clamps aux aperçus dont le texte complet est à un clic.
Comparaison des valeurs d'overflow
Ce que fait chaque valeur d'overflow
Valeur
Contenu excédentaire
Barres de défilement
Conteneur de défilement ?
Tailwind
S'affiche hors de la boîte
Jamais
Non
Coupé au bord du padding
Jamais
Oui (défilable par script)
Coupé
Jamais
Non
Défile
Toujours affichées
Oui
Défile
Seulement si nécessaire
Oui
Ellipsis sur une ligne
La recette de l'ellipsis en trois lignes
Retirez une seule des trois déclarations et les points disparaissent. L'attribut title garde le texte complet accessible.
Ellipsis dans une rangée flex
L'élément du milieu reçoit min-width: 0 pour pouvoir rétrécir sous la largeur de son texte. Sans cela, c'est la rangée qui déborde.
Limitation sur plusieurs lignes
Limiter la description d'une carte à trois lignes
Le modèle préfixé ci-dessous est celui qui est largement pris en charge. La déclaration line-clamp simple est ajoutée pour les navigateurs qui la gèrent déjà.
word-break, overflow-wrap ou hyphens
Couper les mots longs
Déclaration
Coupe où
Idéal pour
Tailwind
overflow-wrap: break-word
Dans un mot seulement s'il déborderait
Texte courant avec un mot long occasionnel
overflow-wrap: anywhere
Pareil, et permet à la boîte de rétrécir
URL dans les éléments flex et les colonnes étroites
wrap-anywhere (v4.1)
word-break: break-all
Entre n'importe quelles lettres, toujours
Code, hashs, identifiants
word-break: keep-all
Jamais dans les mots CJK
Chinois, japonais, coréen
hyphens: auto
Aux syllabes, avec un trait d'union
Texte étroit ou justifié avec lang défini
La même URL avec quatre réglages de coupure
Chaque boîte fait 160px de large. Seule la dernière est laissée en débordement.
Tronquer les cellules de tableau
Disposition de tableau fixe avec cellules en ellipsis
table-layout: fixed fait primer la largeur des colonnes sur le contenu, ce qui permet à l'ellipsis de s'appliquer.
URL longue
Mot composé allemand
Paragraphe
Les grains de café frais sont torréfiés chaque mardi et expédiés l'après-midi même, ils arrivent donc à la plupart des adresses dans les trois jours suivant la torréfaction, quand leur saveur est encore à son meilleur.
L'ellipsis seule a besoin de white-space: nowrap (ou d'un line clamp).
L'ellipsis a besoin d'overflow réglé sur hidden ou clip.
Un line clamp a besoin d'overflow: hidden pour couper le reste.