CSS Effets de Texte
Effets de Texte CSS
CSS dispose de certaines propriétés pour gérer le débordement de texte, le retour à la ligne, les règles de coupure de ligne et les modes d'écriture.
Dans ce chapitre, vous apprendrez les propriétés suivantes :
-
text-overflow- Spécifie comment gérer le contenu débordé -
word-wrap- Permet aux mots longs d'être coupés et de passer à la ligne suivante -
word-break- Spécifie les règles de coupure de ligne -
writing-mode- Spécifie si les lignes de texte sont disposées horizontalement ou verticalement
Propriété CSS text-overflow
La propriété CSS text-overflow spécifie comment le contenu débordé qui n'est pas affiché doit être signalé à l'utilisateur. Il peut être coupé ou affiché avec des points de suspension (...).
Les deux propriétés suivantes sont nécessaires pour que text-overflow prenne effet :
Ici, le contenu débordé est coupé :
Ceci est un long texte qui ne tiendra pas dans la boîte.
Ici, le contenu débordé est affiché avec des points de suspension (...):
Ceci est un long texte qui ne tiendra pas dans la boîte.
Le code CSS est le suivant :
Exemple
p.test1 {
width: 200px;
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
width: 200px;
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} L'exemple suivant montre comment vous pouvez afficher le contenu débordé lorsque vous survolez l'élément :
Exemple
p:hover {
overflow: visible;
} Propriété CSS word-wrap
La propriété CSS word-wrap permet aux mots longs d'être coupés et de passer à la ligne suivante.
Si un mot est trop long pour tenir dans une zone, il déborde :
Ce paragraphe contient un mot très long : thisisaveryveryveryveryveryverylongword. Le long mot sera coupé et passera à la ligne suivante.
La propriété word-wrap vous permet de forcer le texte à se plier, même si cela signifie le couper au milieu d'un mot :
Ce paragraphe contient un mot très long : thisisaveryveryveryveryveryverylongword. Le long mot sera coupé et passera à la ligne suivante.
Le code CSS est le suivant :
Exemple
Permettre aux mots longs d'être coupés et de passer à la ligne suivante :
p {
word-wrap: break-word;
} Propriété CSS word-break
La propriété CSS word-break spécifie comment les mots doivent être coupés lorsqu'ils atteignent la fin d'une ligne.
Cette propriété peut prendre l'une des valeurs suivantes :
-
normal- C'est la valeur par défaut. Utilise les règles de coupure de ligne par défaut de la langue -
break-all- Permet aux mots d'être coupés à n'importe quel caractère pour éviter le débordement -
keep-all- Empêche les mots de se couper
Ici, nous utilisons normal :
Ce paragraphe contient du texte. Cette ligne se coupera au trait d'union.
Ici, nous utilisons break-all :
Ce paragraphe contient du texte. Les lignes se couperont à n'importe quel caractère.
Le code CSS est le suivant :
Exemple
p.test1 {
word-break: normal;
}
p.test2 {
word-break: break-all;
} Propriété CSS writing-mode
La propriété CSS writing-mode spécifie si les lignes de texte sont disposées horizontalement ou verticalement.
Cette propriété peut prendre l'une des valeurs suivantes :
-
horizontal-tb- Par défaut. Le texte s'écoule horizontalement de gauche à droite, verticalement de haut en bas -
vertical-rl- Le texte s'écoule verticalement de haut en bas, horizontalement de droite à gauche -
vertical-lr- Le texte s'écoule verticalement de haut en bas, horizontalement de gauche à droite
Voici un texte avec un élément span ayant un writing-mode vertical-rl .
L'exemple suivant montre quelques modes d'écriture différents :
Exemple
p.test1 {
writing-mode: horizontal-tb;
}
span {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
} Propriétés des Effets de Texte CSS
Le tableau suivant répertorie les propriétés des effets de texte CSS :
| Propriété | Description |
|---|---|
| text-justify | Spécifie comment le texte justifié doit être aligné et espacé |
| text-overflow | Spécifie comment le contenu débordé qui n'est pas affiché doit être signalé à l'utilisateur |
| word-break | Spécifie les règles de coupure de ligne pour les scripts non-CJK |
| word-wrap | Permet aux mots longs d'être coupés et de passer à la ligne suivante |
| writing-mode | Spécifie si les lignes de texte sont disposées horizontalement ou verticalement |