Propriété CSS `text-overflow`

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

En savoir plus
Voir la compatibilité complète

La propriété CSS text-overflow définit la façon dont le contenu débordant masqué est signalé aux utilisateur·ice·s.

Exemple interactif

text-overflow: clip;

text-overflow: ellipsis;

text-overflow: "-";

text-overflow: "";

<section id="default-example">
  <div id="example-element-container">
    <p id="example-element">
      «&nbsp;Y a-t-il du thé dans ce vaisseau spatial&nbsp;?&nbsp;»
      demanda-t-il.
    </p>
  </div>
</section>

#example-element-container {
  width: 100%;
  max-width: 18em;
}

#example-element {
  line-height: 50px;
  border: 1px solid #c5c5c5;
  overflow: hidden;
  white-space: nowrap;
  font-family: sans-serif;
  padding: 0 0.5em;
  text-align: left;
}

Syntaxe

css

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

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

Valeurs

Cette propriété est définie comme une ou deux valeurs séparées par des espaces, y compris :

clip: La valeur par défaut pour cette propriété. Ce mot-clé tronque le texte à la limite de la zone de contenu, donc le découpage peut se produire au milieu d'un caractère. Pour tronquer à la transition entre les caractères, vous pouvez définir text-overflow comme une chaîne de caractères vide, si c'est pris en charge par vos navigateurs cibles : text-overflow: '';.
ellipsis: Ce mot-clé affiche une ellipse ('…', U+2026 HORIZONTAL ELLIPSIS) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de la zone de contenu, ce qui réduit la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, elle est rognée.
<string>: La chaîne de caractères à utiliser pour représenter le texte rogné. La chaîne de caractères est affichée à l'intérieur de la zone de contenu et réduit la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne de caractères, elle est rognée.

La propriété text-overflow définit la façon dont le contenu débordant masqué est signalé aux utilisateur·ice·s. Il peut être tronqué, afficher une ellipse (…) ou afficher une chaîne de caractères personnalisée.

La propriété text-overflow ne force pas le débordement. Pour faire déborder le texte de son conteneur, vous devez définir d'autres propriétés CSS : overflow et white-space. Par exemple :

css

overflow: hidden;
white-space: nowrap;

La propriété text-overflow affecte uniquement le contenu qui déborde d'un élément conteneur de bloc dans sa direction de progression en incise (et non, par exemple, le texte qui déborde en bas d'une boîte).

La propriété text-overflow peut être définie avec une ou deux valeurs. Si une seule valeur est fournie, elle définit le comportement du débordement à la fin de la ligne (l'extrémité droite pour un texte de gauche à droite, l'extrémité gauche pour un texte de droite à gauche). Si deux valeurs sont fournies, la première définit le comportement du débordement à l'extrémité gauche de la ligne, et la seconde le définit à son extrémité droite. La propriété accepte soit une valeur de mot-clé (clip ou ellipsis), soit une valeur de type <string>.

Définition formelle

Valeur initiale	`clip`
Applicabilité	les éléments conteneurs de blocs
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

text-overflow = 
  [ clip | ellipsis | <string> | fade | <fade()> ]{1,2}  

<fade()> = 
  fade( [ <length-percentage> ] )  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

Syntaxe avec une valeur

Cet exemple illustre différentes valeurs pour text-overflow, appliquée à un paragraphe, pour des textes écrits de gauche à droite et de droite à gauche.

HTML

html

<div class="ltr">
  <h2>Texte de gauche à droite</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Texte de droite à gauche</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

CSS

css

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

  /* Les deux règles suivantes sont nécessaires pour text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

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

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

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}

Résultat

Syntaxe avec deux valeurs

Cette exemple illustre la syntaxe à deux valeurs pour text-overflow, où on peut définir un comportement de débordement différent pour le début et la fin du texte. Pour illustrer l'effet, on doit faire défiler la ligne et le début de la ligne est donc caché.

HTML

html

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

CSS

css

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

  /* Les deux règles suivantes sont nécessaires pour text-overflow */
  white-space: nowrap;
  overflow: scroll;
}

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

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

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

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}

JavaScript

// On fait défiler chaque paragraphe afin que le début soit également caché
const paras = document.querySelectorAll("p");

for (let para of paras) {
  para.scroll(100, 0);
}

Résultat

Spécifications

Spécification
CSS Overflow Module Level 3 # text-overflow
Scalable Vector Graphics (SVG) 2 # TextOverflowProperty

Une version précédente de cette interface a atteint le statut de Candidate Recommendation (Candidat à la recommandation). Comme certaines fonctionnalités non listées comme étant à risque doivent être supprimées, la spécification a été rétrogradée au niveau Working Draft (Brouillon de travail), expliquant pourquoi les navigateurs ont implémenté cette propriété sans préfixe, bien qu'elle ne soit pas à l'état de CR.