Propriété CSS text-overflow

La propriété CSS text-overflow spécifie comment le texte en débordement doit être signalé à l'utilisateur. Il s'agit de l'une des propriétés CSS3.

La propriété text-overflow est couramment utilisée avec la propriété overflow définie sur hidden et white-space définie sur nowrap, mais elle peut fonctionner avec d'autres valeurs selon le contexte de mise en page.

En CSS3, la spécification permet d'utiliser une chaîne de caractères personnalisée. Une valeur de chaîne peut contenir des espaces, ou vous pouvez utiliser n'importe quelle autre chaîne personnalisée. Dans les anciennes versions de la spécification, il était indiqué qu'une URL vers une image pouvait être utilisée pour les points de suspension, mais cette fonctionnalité a été supprimée.

Valeur initiale	clip
S'applique à	Éléments conteneurs de blocs.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.textOverflow = "ellipsis";

Syntaxe

Valeurs de text-overflow en CSS

css

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

Exemple de la propriété text-overflow :

Exemple de code CSS text-overflow

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Text-overflow property example</h2>
    <h3>text-overflow: ellipsis</h3>
    <div>Lorem Ipsum</div>
  </body>
</html>

Try it Yourself »

Résultat

Valeurs clip et ellipsis de CSS text-overflow

Exemple de la propriété text-overflow avec les valeurs "clip", "ellipsis" et "initial" :

Exemple de valeurs clip et ellipsis pour CSS text-overflow

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Text-overflow property example</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>

Try it Yourself »

Valeurs

Valeur	Description	Tester »
`clip`	Coupe le texte à la limite de la zone de contenu ; la troncature peut se produire au milieu d'un caractère. Il s'agit de la valeur par défaut.	Tester »
`ellipsis`	Affiche un ellipsis ("...") pour indiquer le texte coupé. Remarque : cela ne fonctionne que sur une seule ligne de texte.	Tester »
`<string>`	Affiche la chaîne de caractères fournie pour représenter le texte coupé. La chaîne est affichée à l'intérieur de la zone de contenu. Remarque : prise en charge limitée dans les anciens navigateurs.	Tester »
`initial`	Définit la valeur par défaut de la propriété.	Tester »
`inherit`	Hérite la propriété de son élément parent.

Pratique

La propriété text-overflow fonctionne si

la propriété overflow est définie sur "hidden" et white-space sur "normal".la propriété overflow est définie sur "visible" et white-space sur "nowrap".la propriété overflow est définie sur "hidden" et white-space sur "nowrap".la propriété overflow est définie sur "visible" et white-space sur "normal".

Propriété CSS text-overflow ​

Syntaxe ​

Exemple de la propriété text-overflow : ​

Résultat ​

Exemple de la propriété text-overflow avec les valeurs "clip", "ellipsis" et "initial" : ​

Valeurs ​