text-overflow - Propriété CSS
Résumé des caractéristiques de la propriété text-overflow
clip
| ellipsis
| fade(10px)
clip
text-overflow
passe d'une valeur à l'autre sans transition.Schéma syntaxique de text-overflow
.
text-overflow
Les liens du schéma donnent accès à plus de détails sur les valeurs
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 valeurnowrap
. - 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.
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
.
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: clip;
Valeur par défaut. Le texte est simplement tronqué, sans indication particulière.
- 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 est2026
. Il peut également être représenté en HTML par l'entité…
. - text-overflow: '>';
Le ou les caractères indiqués sont ajoutés à la fin des lignes tronquées.
- 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.
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
.
Simulateur.
Prise en charge par les navigateurs (compatibilité).
text-overflow
.
text-overflow
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.