Text-overflow - Propriété CSS

Schéma de la syntaxe de text-overflow.

Description de la propriété text-overflow.

La propriété text-overflow définit comment sera indiqué le débordement du texte dans la direction des lignes ( inline ). Pour les langues latines, il s'agit donc de la direction horizontale. Lorsque le contenu de l'élément déborde de la largeur de l'élément, cette propriété permet de choisir ce qui sera affiché pour indiquer qu'une partie du texte n'est pas visible. Le cas le plus courant est l'ajout du caractère … (code hexadécimal 2026 dans le jeu Unicode) ou entité … en HTML.

En principe le navigateur insère automatiquement les retours à la ligne nécessaires pour que le texte ne déborde pas, mais il existe deux cas de figure où le texte peut quand même déborder :

• Les retours à la ligne ont été interdits pour cet élément : propriété white-space avec la valeur nowrap.
• Un des mots du texte est plus long que la dimension de l'élément.

Les trois exemples ci-dessous montrent un texte plus long que la largeur de l'élément. Dans le deuxième cas on a demandé l'affichage du caractère … pour indiquer que le texte n'est pas visible en totalité. On constate que cette marque consomme de l'espace, ce qui laisse encore un peu moins de place de place pour le texte lui-même.
Le troisième exemple et écrit de droite à gauche, comme dans les langues arabes (direction:rtl). La marque de débordement se positionne toujours du côté de la fin logique de la ligne, donc à gauche dans ce cas.

text-overflow ne concerne que les débordements de texte dans la direction inline et n'agit pas sur les débordements dans la direction des blocs. text-overflow n'a d'effet que sur les éléments dont la propriété white-space a la valeur nowrap et la propriété overflow la valeur hidden.

Les éléments dont le contenu est modifiable par l'utilisateur ne sont pas concernés par text-overflow. C'est le cas des zones de saisie input type="text" et des éléments comportant l'attribut contenteditable="true".

Voici les liens vers les autres propriétés qui interagissent avec text-overflow : white-space, overflow, direction.

Interaction de text-overflow avec les barres de défilement.

Lorsque la propriété overflow a la valeur scroll, une barre de défilement permet à l'utilisateur de faire apparaître le contenu non visible. La logique voudrait que la marque de débordement n'apparaisse que lorsque la fin du texte n'est pas visible, et disparaisse lorsqu'on affiche cette dernière grâce à la barre de défilement. Sur ce point là, le comportement des navigateurs est très différent :

• Firefox est celui qui s'en sort le mieux : la marque de débordement disparaît tant que l'utilisateur manipule la barre de défilement, et se ré-affiche ensuite si la fin du texte n'est toujours pas visible.
• La plupart des autres navigateurs, dont Chrome et Edge, tronquent le texte au niveau de la marque de débordement. L'utilisateur ne peut donc plus faire apparaître la fin du texte.

Remarque : la marque de débordement ne s'affiche jamais pour indiquer que le début du texte n'est pas visible.

Vous pouvez tester le comportement de votre navigateur actuel sur l'exemple ci-dessous :

Texte toujours trop long pour la largeur de l'élément.

Comportement préconisé vis à vis des interactions de l'utilisateur.

Le caractère … (ou tout autre caractère qui le remplace) ne faisant pas partie du texte original, il ne doit pas pouvoir être sélectionné, ni copié dans le presse-papier.

Particularité du mécanisme d'héritage.

Le mécanisme d'héritage est tout à fait standard pour text-overflow mais il y a quelque chose de trompeur : une autre propriété nécessaire au fonctionnement de text-overflow n'est pas héritées par défaut : overflow. On a donc l'impression que la propriété text-overflow n'est pas héritée. Pourtant si elle est bien héritée, mais son effet est annulé par l'autre propriété qui ne l'est pas. Il faut donc redéfinir la valeur de cette propriété sur les éléments enfants ou forcer sa valeur à inherit.

Dans l'exemple ci-après, l'élément parent fait bien apparaître le caractère … indiquant le débordement du texte.
text-overflow a été définie sur l'élément "Enfant n°1". Le caractère … ne s'affiche pas, laissant croire que la valeur de text-overflow n'a pas été héritée.
Sur l'élément"Enfant n°2", la propriété overflow a été fixée à la valeur inherit.

Prise en charge de la langue.

La marque de débordement apparaît toujours du côté end : pour les langues latines, ce sera donc à droite, et à gauche pour les langues arabes.

Valeurs pour text-overflow.

• text-overflow: clip;

  Valeur par défaut. Le texte est simplement tronqué, sans indication particulière.

  Cette ligne de texte dépasse son conteneur.
  text-overflow:clip;
• text-overflow: ellipsis;

  Le symbole trois points encore nommé "ellipsis" ( … ) est ajouté à la fin de la ligne. Il s'agit bien du caractère unique représentant les trois points. Son code hexadécimal dans la table des caractères Unicode est 2026. Il peut également être représenté en HTML par l'entité ….

  Cette ligne de texte dépasse son conteneur.
  text-overflow:ellipsis;
• text-overflow: ' >';

  Le ou les caractères indiqués sont ajoutés à la fin des lignes tronquées.

  Cette ligne de texte dépasse son conteneur.
  text-overflow:' ⇒';
• text-overflow: fade(10px); ⚠

  Le texte devient de plus en plus transparent pour finalement disparaître à la bordure du bloc. Cette syntaxe est peu reconnue par les navigateurs.

  La valeur indiquée entre parenthèses doit être suivie d'une unité de dimension (voir les unités de dimension). S'il s'agit d'un pourcentage, il est calculé par rapport à la largeur du bloc.
  Si la valeur est omise, le navigateur est libre de choisir la valeur qu'il souhaite, en général 1em.

  Cette ligne de texte dépasse son conteneur.
  text-overflow:fade;

  La fonction fade() n'est pas encore reconnue par les navigateurs. Il est possible d'obtenir un effet comparable en utilisant un masque. Mais bien entendu l'effet ne sera pas contextuel : il sera toujours présent même si le texte ne déborde pas.

  Long texte qui déborde de son conteneur
  (simulation)
• text-overflow: ellipsis clip; ⚠

  Lorsque deux valeurs sont indiquées elles correspondent, pour la première au coté gauche des lignes, et au côté droit pour la deuxième valeur. Sachant que le texte ne peut pas déborder des deux côtés à la fois, c'est la propriété direction qui définit de quel côté le texte déborde.

  Cette longue ligne de texte dépasse de beaucoup son conteneur.

  Cette longue ligne de texte dépasse de beaucoup son conteneur.
  text-overflow:'⇐ ' ' ⇒';
• text-overflow: initial; (clip) text-overflow: inherit; text-overflow: revert; text-overflow: revertLayer; text-overflow: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de text-overflow.

Un exemple d'animation de la propriété text-overflow, pour inciter le lecteur à afficher la suite du texte.
⚠ Certains navigateurs (comme Chrome) n'afficheront pas cette animation, à cause d'un traitement partiel de la propriété text-overflow.

Exemple interactif avec la propriété text-overflow.

Compatibilité des navigateurs avec text-overflow.

1

Propriété
text-overflow

2

Syntaxe
à 2 valeurs

3

Choix du
caractère

Estimation de la prise en charge globale.

97%

2%

2%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Histoire de la propriété text-overflow.

• Module CSS - Débordements - Niveau 3

  Présentation de la propriété text-overflow, acceptant les valeurs clip et ellipsis.
  

  18 Avril 2013

  Document de travail.

  

  

  

• Module CSS - Débordements - Niveau 4

  Aménagement de la syntaxe de text-overflow : ajout de la valeur fade.
  

  13 Juin 2017

  Document de travail.

  

  

  

Voir aussi, concernant la gestion des débordements.

Le module de spécification CSS Overflow Module regroupe tout ce qui concerne les débordements et défilements de contenu. La propriété text-overflow, ainsi que les suivantes, sont décrites dans ce module.

Propriétés :