Effets de texte CSS
Débordement de texte CSS , retour à la ligne, règles de saut de ligne et modes d'écriture
Dans ce chapitre, vous découvrirez les propriétés suivantes :
text-overflowword-wrapword-breakwriting-mode
Débordement de texte CSS
La propriété CSS text-overflowspécifie comment le contenu débordé qui n'est pas affiché doit être signalé à l'utilisateur.
Il peut être clipsé :
Ceci est un long texte qui ne rentre pas dans la case
ou il peut être rendu sous forme d'ellipse (...) :
Ceci est un long texte qui ne rentre pas dans la case
Le code CSS est le suivant :
Exemple
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
L'exemple suivant montre comment vous pouvez afficher le contenu débordé lors du survol de l'élément :
Exemple
div.test:hover {
overflow: visible;
}
Habillage de mots CSS
La propriété CSS word-wrappermet aux mots longs de pouvoir être coupés et renvoyés à la ligne suivante.
Si un mot est trop long pour tenir dans une zone, il s'étend à l'extérieur :
Ce paragraphe contient un mot très long : c'est un mot très très très très très long. Le mot long se cassera et passera à la ligne suivante.
La propriété word-wrap vous permet de forcer le texte à s'enrouler - même si cela signifie le diviser au milieu d'un mot :
Ce paragraphe contient un mot très long : c'est un mot très très très très très long. Le mot long se cassera 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;
}
Coupure de mots CSS
La propriété CSS word-breakspécifie les règles de saut de ligne.
Ce paragraphe contient du texte. Cette ligne va casser les traits d'union.
Ce paragraphe contient du texte. Les lignes se briseront à n'importe quel caractère.
Le code CSS est le suivant :
Exemple
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Mode d'écriture CSS
La propriété CSS writing-modespécifie si les lignes de texte sont disposées horizontalement ou verticalement.
Du texte avec un élément span avec un vertical-rl mode écriture.
L'exemple suivant montre différents modes d'écriture :
Exemple
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
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 :
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |