OUJOOD.COM
Définition de la propriété CSS text-overflow
La propriété CSS text-overflow est utilisée pour spécifier comment le texte doit être affiché lorsqu'il dépasse la taille de son conteneur.
La propriété text-overflow permet de contrôler le comportement de dépassement de texte lorsqu'il est trop long pour tenir dans un conteneur.
Syntaxe générale de la propriété CSS text-overflow
La syntaxe générale pour la propriété text-overflow est la suivante :
.selector {
text-overflow: value;
}
| Valeurs par défaut | clip |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.textOverflow="ellipsis" |
Valeurs possibles de la propriété CSS text-overflow
Les valeurs possibles pour la propriété text-overflow sont :
- clip: masque le texte qui dépasse le conteneur.
- ellipsis: affiche des points de suspension (...) à la fin du texte qui dépasse le conteneur.
- fade: applique un fondu en fin de ligne pour indiquer que du texte est masqué.
- initial: spécifie la valeur par défaut de la propriété.
- inherit: spécifie que la valeur de la propriété doit être héritée de son élément parent.
Exemples pratiques d'utilisation de la propriété CSS text-overflow
Voici un exemple d'utilisation de la propriété text-overflow avec differents valeurs :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tutoriel sur text-overflow</title>
<style>
.overflow {
width: 10em;
outline: 1px solid #000;
margin: 0 0 2em 0;
padding: 10px;
white-space: nowrap;
overflow: hidden;
}
body {
font-family: monospace;
}
p {
display: block;
font-size: 14px;
padding: 3px;
margin: 0 0 5px 0;
text-align: center;
}
.double {
text-overflow: fade;
}
.ellipsis {
text-overflow: ellipsis;
}
.clip {
text-overflow: clip;
}
</style>
</head>
<body>
<p class="overflow clip">Ceci est un exemple de texte tronqué via text-overflow avec la valeur "clip".</p>
<p class="overflow ellipsis">Ceci est un exemple de texte tronqué via text-overflow avec la valeur "ellipsis".</p>
<p class="overflow double">Ceci est un exemple de texte tronqué via text-overflow avec la valeur "double".</p>
</body>
</html>
Astuces et conseils d'utilisation de la propriété CSS text-overflow
Voici quelques astuces et conseils pour utiliser la propriété text-overflow :
- Assurez-vous d'avoir défini une largeur fixe ou maximale pour le conteneur afin que le texte dépasse réellement.
- Utilisez la propriété white-space: nowrap; pour empêcher le texte de se retourner à la ligne.
- Expérimentez avec différentes valeurs de text-overflow pour trouver celle qui convient le mieux à votre design.
N'hésitez pas à expérimenter avec la propriété text-overflow pour découvrir ses différentes utilisations et combinaisons avec d'autres propriétés CSS. Cela vous permettra d'obtenir des effets visuels intéressants pour la gestion du texte dans vos projets web.
En conclusion, la propriété CSS text-overflow est un outil puissant pour gérer le dépassement de texte dans les conteneurs. En utilisant les valeurs appropriées, vous pouvez contrôler comment le texte est tronqué ou masqué, et ajouter des indications visuelles pour les portions de texte manquantes. Expérimentez avec les différentes valeurs et combinez-les avec d'autres propriétés CSS pour obtenir des résultats adaptés à vos besoins de conception.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 | 6 | 7 | 3.1 | 11.0 9.0 -o- |