Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

text-overflow - Propriété CSS

text-overflow

Résumé des caractéristiques de la propriété text-overflow

Description rapide
Définit l'indicateur de débordement du texte.
Statut
Standard
Valeurs prédéfinies
clip | ellipsis | fade(10px)
Pourcentages
Ne s'appliquent pas.
Valeur initiale
clip
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété text-overflow passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Débordements
Références (W3C)
Statut du document:: WD (document de travail)

Description.

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.

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

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.

Nous signalons ici une non-conformité qui peut être particulièrement gênante sur certain navigateurs.

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.

Essayez de copier-coller ce texte en sélectionnant
plusieurs lignes, pour vérifier que le caractère généré par text-overflow
n'est pas inclus dans la sélection, ni le copier-coller.
 

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

Le mécanisme d'héritage est tout à fait standard pour text-overflow et sa valeur est bien héritée par défaut. Mais il y a quelque chose de trompeur : deux autres propriétés nécessaires au fonctionnement de text-overflow ne sont pas héritées par défaut : overflow et text-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 les deux autres propriétés qui ne le sont pas. Il faut donc redéfinir la valeur de ces deux propriétés sur les éléments enfants ou forcer leur 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.
Aucune propriété n'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", les propriétés white-space et overflow ont été fixées à la valeur inherit.

Élément parent : texte trop long pour tenir dans la largeur de l'élément
Enfant n° 1 : texte trop long pour tenir dans la largeur de l'élément
Enfant n° 2 : texte trop long pour tenir dans la largeur de l'élément

Interaction de la propriété text-overflow avec la direction d'écriture.

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.

Syntaxes pour text-overflow.

text-overflow:
Schéma syntaxique de text-overflow (propriété CSS)Syntaxe de text-overflow et rôle des valeurs clip et ellipsis. clip clip ellipsis ellipsis
;
  • text-overflow: clip;

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

    Exemple avec 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é ….

    Exemple avec text-overflow: ellipsis
  • text-overflow: '>';

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

    Exemple avec text-overflow et un caractère
  • 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 CSS de dimension). S'il s'agit d'un pourcentage, il est calculé par rapport à la largeur du bloc.

    Exemple avec text-overflow: fade()

    La fonction fade() n'est pas reconnue par les navigateurs et ne figure plus dans la norme W3C. 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 du container
  • text-overflow: initial; text-overflow: inherit; text-overflow: revert; text-overflow: revert-layer; text-overflow: unset;

    La valeur initiale est : clip.

Animation de la propriété 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.

Ce texte déborde de la largeur disponible

Simulateur.

text-overflow :
Ce texte déborde la largeur de son container

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en charge générale de la syntaxe de la propriété text-overflow.
Colonne 2
Prise en charge de la syntaxe avec deux valeurs.
Colonne 3
Traitement de la syntaxe avec un caractère entre apostrophes ou guillemets pour définir le caractère de suite.
1
text-overflow
2
2 values
3
Quoted text
Estimation de la prise en charge en pourcentage du parc actuel.
99%
3%
3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que text-overflow.

Les spécifications CSS éditées par le W3C sont organisées en modules. text-overflow fait partie du Module CSS - Débordements (CSS Overflow Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Gère l'affichage d'une marque de suite à la fin d'un élément lorsque le contenu déborde de ce dernier.
Gestion des débordements, lorsque le contenu est trop grand pour les dimensions imposées à l'élément.
Gestion des débordements dans la direction secondaire.
Définit la marge de débordement, lorsque le contenu est plus grand que l'élément.
Gestion des débordements dans la direction principale.
Gestion du débordement dans le sens horizontal.
Gestion du débordement dans le sens vertical.
Choisit entre un défilement brutal ou progressif de la page.
Réserve ou non la gouttière pour une barre de défilement.