Propriété CSS text-overflow
Utilisez la propriété CSS text-overflow pour indiquer comment signaler le débordement de texte en ligne. Valeurs et exemples illustrés.
La propriété CSS text-overflow indique comment le contenu qui déborde de son conteneur est signalé à l'utilisateur — généralement en le coupant ou en remplaçant la partie masquée par des points de suspension (…). C'est l'une des propriétés CSS3.
Cette page couvre la syntaxe et les valeurs, les trois conditions qu'un bloc doit remplir pour que text-overflow prenne effet, la façon de tronquer plusieurs lignes, un piège courant avec Flexbox, ainsi qu'une liste complète des valeurs.
Pourquoi trois propriétés sont nécessaires ensemble
Seule, text-overflow ne fait rien. Elle décrit uniquement la façon dont le texte qui déborde déjà doit être rendu ; vous devez donc d'abord faire déborder le texte et masquer l'excédent. Pour la troncature sur une ligne, les trois propriétés suivantes doivent être appliquées au même élément :
white-space: nowrap— empêche le texte de passer à la ligne, le forçant sur une seule ligne qui dépasse du bloc.overflow: hidden— découpe la partie qui sort du bloc (sans cela, le texte resterait visible à l'extérieur).text-overflow: ellipsis— indique au navigateur de marquer le texte coupé par des points de suspension plutôt qu'une coupure nette.
Si l'une de ces propriétés est absente, les points de suspension n'apparaîtront pas. Le bloc doit également avoir une largeur contrainte (ou max-width) pour qu'il y ait effectivement quelque chose à déborder.
En CSS3, vous pouvez également fournir une chaîne personnalisée à la place des points de suspension. Une valeur de type string peut contenir des espaces, ou vous pouvez utiliser toute autre chaîne personnalisée. Dans les anciennes versions du brouillon de la spécification, une URL vers une image pouvait être utilisée, mais cela a été abandonné.
| Valeur initiale | clip |
|---|---|
| S'applique à | Les éléments conteneurs de type bloc. |
| Hérité | Non. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.textOverflow = "ellipsis"; |
Syntaxe
Valeurs de text-overflow en CSS
text-overflow: clip | ellipsis | string | initial | inherit;Exemple de la propriété text-overflow :
Exemple de code CSS text-overflow
<!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>Résultat
Exemple de la propriété text-overflow avec les valeurs "clip", "ellipsis" et "initial" :
Exemple CSS text-overflow avec les valeurs clip et ellipsis
<!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>Tronquer plusieurs lignes
text-overflow: ellipsis ne fonctionne que sur une seule ligne. Pour limiter le texte à un nombre fixe de lignes et ajouter des points de suspension après la dernière, utilisez l'approche -webkit-line-clamp. Elle est largement prise en charge par les navigateurs modernes malgré le préfixe vendor :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
background-color: #eee;
border: 1px solid #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Clamp to two lines</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Ici, vous ne définissez pas white-space: nowrap, car le texte doit passer à la ligne avant d'être limité.
Piège : les enfants de Flexbox et CSS Grid
Un élément flex ou grid a une valeur min-width par défaut de auto, ce qui l'empêche de rétrécir en dessous de la taille intrinsèque de son contenu. Cela empêche overflow: hidden de s'activer, de sorte que les points de suspension n'apparaissent jamais même si les trois propriétés sont définies. La solution consiste à ajouter min-width: 0 (ou overflow: hidden) à l'élément tronqué :
.flex-child {
min-width: 0; /* allow the item to shrink */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Valeurs
| Valeur | Description | Tester |
|---|---|---|
clip | Coupe le texte à la limite de la zone de contenu ; la troncature peut survenir au milieu d'un caractère. Il s'agit de la valeur par défaut. | Tester » |
ellipsis | Affiche des points de suspension ("...") pour indiquer le texte masqué. Remarque : cela ne fonctionne que sur une seule ligne de texte. | Tester » |
<string> | Affiche la chaîne donnée pour représenter le texte masqué. La chaîne est affichée dans la zone de contenu. Remarque : prise en charge limitée dans les anciens navigateurs. | Tester » |
initial | Applique la valeur par défaut de la propriété. | Tester » |
inherit | Hérite de la propriété de son élément parent. |