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>

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>

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.

Support de Navigateurs

4.0+ 12.0+ 7.0+ 3.1+ 11.5+
10.1 -o-


Trouvez-vous cela utile?

Articles Associées