Effets de texte CSS
Texte CSS Débordement, 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
Le CSS text-overflow La propriété spé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 {
espace blanc : nowrap ;
largeur : 200 pixels ;
bordure : 1px solide #000000 ;
débordement caché;
débordement de texte : clip ;
}
p.test2 {
espace blanc : nowrap ;
largeur : 200 pixels ;
bordure : 1px solide #000000 ;
débordement caché;
débordement de texte : points de suspension ;
}
Essayez-le vous-même »
L’exemple suivant montre comment vous pouvez afficher le contenu débordé lors du survol de l’élément :
Habillage de mots CSS
Le CSS word-wrap permet aux longs mots 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 ;
}
Essayez-le vous-même »
Coupure de mots CSS
Le CSS word-break La propriété spé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 {
mot-coupe : garder tout ;
}
p.test2 {
word-break : break-all ;
}
Essayez-le vous-même »
Mode d’écriture CSS
Le CSS writing-mode La propriété spé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 {
mode d’écriture : horizontal-tb ;
}
span.test2 {
mode d’écriture : vertical-rl ;
}
p.test2 {
mode d’écriture : vertical-rl ;
}
Essayez-le vous-même »
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 |
|---|---|
| texte-justifier | Spécifie comment le texte justifié doit être aligné et espacé |
| débordement de texte | Spécifie comment le contenu débordé qui n’est pas affiché doit être signalé à l’utilisateur |
| saut de mot | Spécifie les règles de saut de ligne pour les scripts non CJC |
| retour à la ligne | Permet aux longs mots de pouvoir être brisés et de passer à la ligne suivante |
| mode écriture | Spécifie si les lignes de texte sont disposées horizontalement ou verticalement |
#Effets #texte #CSS