Propriété CSS text-overflow
Exemple
Utilisation de la propriété text-overflow :
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La text-overflow
propriété spécifie comment le contenu débordé qui n'est pas affiché doit être signalé à l'utilisateur. Il peut être tronqué, afficher des points de suspension (...) ou afficher une chaîne personnalisée.
Les deux propriétés suivantes sont requises pour text-overflow :
- espace blanc : nowrap ;
- débordement caché;
Valeur par défaut: | agrafe |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.textOverflow="ellipse" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -o- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
Syntaxe CSS
text-overflow: clip|ellipsis|string|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
clip | Default value. The text is clipped and not accessible | |
ellipsis | Render an ellipsis ("...") to represent the clipped text | |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Débordement de texte avec un effet de survol (afficher le texte entier au survol) :
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Pages connexes
Tutoriel CSS : Effets de texte CSS
Référence HTML DOM : propriété textOverflow