Propriété CSS text-overflow

La propriété CSS text-overflow spécifie comment le texte en ligne débordant doit être signalé à l'utilisateur.

La propriété text-overflow fonctionne si la propriété overflow est définie à "hidden", et white-space est définie à "nowrap".

En CSS3, la spécification permet d'utiliser une chaîne personnalisée. Un espace blanc, considéré comme une chaîne, ou toute autre chaîne personnalisée peut être utilisé.

Valeur initiale	clip
Appliquée à	Éléments du conteneur bloc.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.textOverflow = "ellipsis";

Syntaxe

text-overflow: clip | ellipsis | string | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      white-space: nowrap; 
      background-color: #eee;
      width: 50px; 
      overflow: hidden;
      text-overflow: ellipsis; 
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-overflow</h2>
    <h3>text-overflow: ellipsis</h3>
    <div>Lorem Ipsum</div>
  </body>
</html>

Essayez-vous-même!

Un exemple qui contient les valeurs "clip", "ellipsis" et "initial":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.element1 {
      white-space: nowrap; 
      background-color: #eee;
      width: 50px; 
      overflow: hidden;
      text-overflow: clip; 
      border: 1px solid #666;
      }
      div.element2 {
      white-space: nowrap; 
      background-color: #eee;
      width: 50px; 
      overflow: hidden;
      text-overflow: ellipsis; 
      border: 1px solid #666;
      }
      div.element3 {
      white-space: nowrap; 
      background-color: #eee;
      width: 50px; 
      overflow: hidden;
      text-overflow: initial; 
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-overflow</h2>
    <h3>text-overflow: clip</h3>
    <div class="element1">Lorem Ipsum</div>
    <h3>text-overflow: ellipsis</h3>
    <div class="element2">Lorem Ipsum</div>
    <h3>text-overflow: initial</h3>
    <div class="element3">Lorem Ipsum</div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
clip	Coupe le texte à la limite de la zone de contenu, la troncature peut se produire au milieu d'un caractère. C'est la valeur par défaut de cette propriété.
ellipsis	Rend des points de suspension ("...") pour afficher le texte coupé.
<string>	Rend la chaîne donnée pour représenter le texte coupé. La chaîne est affichée dans la zone de contenu.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.