text-overflow
Détermine comment marquer un texte coupé à la fin d’une ligne, par exemple avec des points de suspension.
- Valeur initiale
clip- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs de bloc
- JavaScript
element.style.textOverflow = "ellipsis"
Exemple
#.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<ul class="stage" style="margin: 0; padding-left: 20px; width: 240px;">
<li class="title" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Module 1 : introduction au HTML et à la structure d’un document</li>
<li class="title" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Module 2 : formulaires, champs et validation des données</li>
</ul>Définition et utilisation
#La propriété text-overflow détermine ce qu’il faut afficher à l’endroit où le texte ne tient plus. La valeur ellipsis ajoute des points de suspension, signalant que le texte est plus long.
Elle ne suffit pas seule. Le texte doit être sur une seule ligne (white-space: nowrap) et rogné (overflow: hidden), et l’élément doit avoir une largeur limitée. Ces trois propriétés vont toujours ensemble.
Pour tronquer un texte après plusieurs lignes, on utilise une autre technique : -webkit-line-clamp avec display: -webkit-box, prise en charge aujourd’hui par tous les navigateurs principaux.
Syntaxe
#text-overflow: clip | ellipsis;Valeurs
#Valeurs en pratique
#clip
.demo { text-overflow: clip; }ellipsis
.demo { text-overflow: ellipsis; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Rendez le texte complet d’un titre tronqué disponible, par exemple dans l’attribut
titleou sur une page de détail. - Dans un élément flex, la troncature ne fonctionne qu’après l’ajout de
min-width: 0.
Entrées associées
#- white-spaceDétermine comment traiter les espaces, les retours à la ligne et le retour automatique dans le texte.
- overflowDécide quoi faire du contenu qui ne tient pas dans un élément.
- overflow-wrapCoupe les mots longs uniquement lorsqu’ils dépasseraient sinon du conteneur.
- min-widthDéfinit une largeur minimale, en dessous de laquelle l’élément ne se réduit pas.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.