Text-overflow - Astuces CSS | CSS Almanach 2025

La text-overflowpropriété en CSS traite des situations où le texte est coupé lorsqu'il déborde de la boîte de l'élément. Il peut être tronqué (c.-à-d. Coupé, masqué), afficher des points de suspension («…», valeur de plage Unicode U + 2026) ou afficher une chaîne définie par l'auteur (pas de support actuel du navigateur pour les chaînes définies par l'auteur).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Notez que text-overflowse produit uniquement lorsque le conteneur overflowpropriété a la valeur hidden, scrollou autoet white-space: nowrap;.

Le débordement de texte ne peut se produire que sur des éléments de niveau bloc ou bloc en ligne, car l'élément doit avoir une largeur pour être débordé. Le débordement se produit dans la direction déterminée par la propriété direction ou les attributs associés.

La démo suivante affiche le comportement de la text-overflowpropriété avec toutes les valeurs possibles. La prise en charge du navigateur varie!

Découvrez ce stylo!

Le réglage overflowsur scrollou autoaffichera les barres de défilement pour révéler le texte supplémentaire, mais hiddenpas. Le texte masqué peut être sélectionné en sélectionnant les ellipses.

Vieilles affaires

Une ancienne version de la spécification indique que vous pouvez utiliser une URL vers une image pour les points de suspension, mais il semble que cela ait été abandonné.

Il existe une syntaxe à deux valeurs, par exemple text-overflow: ellipsis ellipsis;, qui contrôlerait le débordement sur les côtés gauche et droit du même conteneur. Je ne sais pas comment cela serait possible. Peut-être du texte centré dans un conteneur trop petit? La nouvelle spécification indique que cela, tout en définissant une chaîne, est «à risque».

Je ne sais pas d'où ellipsis-wordvient. Ce n'est pas dans les spécifications ni dans aucune autre documentation que sur WebPlatform.org.

La text-overflowpropriété était autrefois un raccourci pour la combinaison de text-overflow-modeet text-overflow-ellipsis, mais plus maintenant et ces propriétés séparées n'existent pas.