La propriété text-overflow en CSS traite des situations où le texte est tronqué lorsquil déborde la boîte de lélément. Il peut être tronqué (cest-à-dire coupé, masqué), afficher des points de suspension (…, valeur de plage Unicode U + 2026) ou afficher une chaîne définie par lauteur (pas de support actuel du navigateur pour les chaînes définies par lauteur).
Notez que text-overflow ne se produit que lorsque la propriété overflow du conteneur a la valeur hidden, scroll ou auto et 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émonstration suivante affiche le comportement de la propriété text-overflow avec toutes les valeurs possibles. La prise en charge du navigateur varie!
Paramètre overflow à scroll ou auto affichera des barres de défilement pour révéler le texte supplémentaire, tandis que hidden ne le sera pas. Le texte masqué peut être sélectionné en sélectionnant les points de suspension.
Old Stuff
Une ancienne version de la spécification indique que vous pouvez utiliser une URL vers une image pour les points de suspension, mais cela ressemble à si cela a été abandonné.
Il existe une syntaxe à deux valeurs, par exemple text-overflow: ellipsis ellipsis;, cela 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 dit que cela, ainsi que la définition dune chaîne, est « à risque ».
Je ne sais pas doù vient ellipsis-word. Ce nest pas dans la spécification ou dans toute autre documentation autre que sur WebPlatform.org.
La propriété text-overflow était un raccourci pour la combinaison de text-overflow-mode et text-overflow-ellipsis, mais plus maintenant et ces propriétés distinctes nexistent pas.
Propriétés associées
-
white-space -
overflow -
word-break -
width