La propriété text-overflow détermine la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (clipping), afficher une ellipse ('', U+2026 Horizontal Ellipsis) ou afficher une chaîne de caractères choisie.

Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide ('').

Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec white-space: nowrap) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.

Cette  propriété CSS ne force pas le dépassement. Pour ce faire et afin que text-overflow soit appliqué, l'auteur devara ajouter des propriétés supplémentaires sur l'élément, par exemple : overflow avec hidden.

Valeur initialeclip
Applicabilitéles éléments conteneurs de blocs
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* On gère le dépassement en fin de ligne
    - à droite en ltr,
    - à gauche en rtl */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";

/* On gère le dépassement au début et
   à la fin de la ligne. La directionnalité
   n'a pas d'importance */
text-overflow: clip ellipsis;
text-overflow: "…" "…";

/* Valeurs globales */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;

Valeurs

clip
Ce mot-clé indique qu'on tronque le texte à la limite de la boîte de contenu. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide ('') comme valeur pour cette propriété. La valeur clip est la valeur par défaut.
ellipsis
Ce mot-clé indique qu'on affiche une ellipse ('…', U+2026 Horizontal Ellipsis) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de la boîte de contenu et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.
<string>
Une chaîne de caractères (type <string>) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de la boîte de contenu et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.

Syntaxe formelle

[ clip | ellipsis | <string> ]{1,2}

Exemples

CSS

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Nécessaires pour text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-visible {
  white-space: initial;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  /* Cette forme n'est pas prise en charge
    par la plupart des navigateurs. cf. la 
    section Compatibilité ci-après */
  text-overflow: " [..]"; 
}

HTML

<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

Résultat

Valeur CSS direction: ltr direction: rtl
Résultat attendu Résultat du navigateur Résultat attendu Résultat du navigateur
overflow:visible 1234567890
1234567890
0987654321
1234567890
text-overflow: clip t-o_clip.png
123456
t-o_clip_rtl.png
1234567890
text-overflow: '' 12345
123456
54321
1234567890
text-overflow: ellipsis 1234…
1234567890
…4321
1234567890
text-overflow: '.' 1234.
1234567890
.4321
1234567890
text-overflow: clip clip 123456
1234567890
654321
1234567890
text-overflow: clip ellipsis 1234…
1234567890
6543…
1234567890
text-overflow: clip '.' 1234.
1234567890
6543.
1234567890
text-overflow: ellipsis clip …3456
1234567890
…4321
1234567890
text-overflow: ellipsis ellipsis …34…
1234567890
…43…
1234567890
text-overflow: ellipsis '.' …34.
1234567890
…43.
1234567890
text-overflow: ',' clip ,3456
1234567890
,4321
1234567890
text-overflow: ',' ellipsis ,34…
1234567890
,43…
1234567890
text-overflow: ',' '.' ,34.
1234567890
,53.
1234567890

Spécifications

Spécification État Commentaires
CSS Basic User Interface Module Level 3
La définition de 'text-overflow' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Une version précédente de cette interface avait atteint le statut de Candidate Recommendation. Certaines fonctionnalités devaient être retirées et n'étaient pas listées parmi les fonctionnalités à risque, la spécification a donc été déchue au niveau Working Draft. Cela explique pourquoi les navigateurs ont implémenté cette propriété sans préfixe bien qu'elle ne soit pas une CR.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple 1.0 (312.3) 7.0 (7.0)[1] (Oui) 6.0[2] 9-o[3]
11.0
1.3 (312.3)
Syntaxe avec deux valeurs Pas de support 9.0 (9.0) ? Pas de support Pas de support Pas de support
Syntaxe avec une chaîne Pas de support 9.0 (9.0) ? Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple (Oui) 7.0 (7.0) (Oui) ? (Oui) (Oui)
Syntaxe avec deux valeurs Pas de support 9.0 (9.0) ? Pas de support Pas de support Pas de support
Syntaxe avec une chaîne Pas de support 9.0 (9.0) ? Pas de support Pas de support Pas de support

[1] À partir de Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), la gestion de text-overflow sur les blocs avec le dépassement des deux côtés a été corrigé. Auparavant, si on définissait une valeur (par exemple text-overflow:ellipsis;), l'ellipse s'appliquait des deux côtés et pas uniquement sur la fin indiquée par la direction du texte.

[2] Internet Explorer 8 a introduit une version préfixée -ms-text-overflow, synonyme de text-overflow. Cette version préfixée ne doit pas être utilisée.

[3] Opera 9 et 10 doivent être utilisés avec la version préfixée : -o-text-overflow.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Guillaume-Heras, Sebastianz, PifyZ, LukyVj, teoli, FredB
 Dernière mise à jour par : SphinxKnight,