La propriété CSS text-overflow permet de définir l’affichage d’un texte qui dépasse les limites de son conteneur. Cela peut être utile pour contrôler l’apparence des textes longs dans des espaces restreints, par exemple dans des menus, des titres ou des boutons.
La propriété text-overflow
- text-overflow: visible;
- text-overflow: ellipsis;
- text-overflow: clip;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Les différentes valeurs pour la propriété text-overflow
La propriété text-overflow peut prendre plusieurs valeurs :
ellipsis: Valeur par défaut. Affiche une ellipse...à la fin du texte qui dépasse.clip: Coupe le texte à la limite du conteneur, sans indication visuelle du texte masqué.visible: Affiche tout le texte, même s’il dépasse du conteneur.inherit: Hérite de la valeur définie pour l’élément parent.initial: Définit la valeur initiale de la propriété, généralementellipsis.
Conditions prérequises pour utiliser text-overflow
Pour que text-overflow fonctionne correctement, certaines conditions doivent être remplies :
- Overflow : La propriété
overflowdu conteneur doit être définie sur hidden, scroll ou auto. - white-space : La propriété
white-spacedoit être définie surnowrappour empêcher le texte de se dérouler sur plusieurs lignes.
Syntaxe de la propriété text-overflow
Voici un exemple d’utilisation de la propriété text-overflow pour afficher une ellipse dans un bouton :
.button {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Dans cet exemple, le texte du bouton sera coupé à 200 pixels de large et une ellipse sera affichée pour indiquer qu’il y a du texte masqué. La propriété overflow: hidden est nécessaire pour empêcher le texte de dépasser du conteneur, et la propriété white-space: nowrap empêche le texte de se casser sur plusieurs lignes.
La propriété text-overflow ne fonctionne qu’avec le texte en ligne. Elle n’a aucun effet sur le texte bloqué. Le support de la propriété text-overflow varie selon les navigateurs. Il est important de tester votre code sur différents navigateurs pour vous assurer qu’il fonctionne comme prévu.
