CSS3 Text
CSS3 contient plusieurs nouvelles fonctionnalités de texte.
Dans ce chapitre, vous allez en apprendre davantage sur les propriétés de texte suivantes:
-
text-overflow -
word-wrap -
word-break
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -o- spécifient la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 Overflow texte
Le CSS3 text-overflow propriété spécifie comment le contenu débordé non affiché doit être signalée à l'utilisateur.
Il peut être fixé:
Ceci est un long texte qui ne rentrent pas dans la boîte
ou il peut être rendu comme une suspension (...):
Ceci est un long texte qui ne rentrent pas dans la boîte
Le code CSS est la suivante:
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;
} Essayez - le vous - même » L'exemple suivant montre comment vous pouvez afficher le contenu débordé lors du survol de l'élément:
CSS3 Parole Emballage
Le CSS3 word-wrap propriété permet de longs mots pour pouvoir être rompu et envelopper sur la ligne suivante.
Si un mot est trop long pour tenir dans une zone, il se dilate à l'extérieur:
Ce paragraphe contient un mot très long: thisisaveryveryveryveryveryverylongword . Le long mot se brisera et envelopper à la ligne suivante.
La propriété word-wrap vous permet de forcer le texte à envelopper - même si cela signifie le fractionnement dans le milieu d'un mot:
Ce paragraphe contient un mot très long: thisisaveryveryveryveryveryverylongword . Le long mot se brisera et envelopper à la ligne suivante.
Le code CSS est la suivante:
Exemple
Laisser les mots longs pour pouvoir être brisé et enveloppent sur la ligne suivante:
p {
word-wrap: break-word;
}
Essayez - le vous - même » CSS3 Parole de rupture
Le CSS3 word-break propriété spécifie les règles de la ligne de rupture.
Ce paragraphe contient du texte. Cette ligne-break-à-tirets.
Ce paragraphe contient du texte. Les lignes se briser à tout caractère.
Le code CSS est la suivante:
Exemple
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 »
CSS3 Propriétés du texte
Le tableau ci-dessous répertorie les nouvelles propriétés du texte CSS3:
| Propriété | La description |
|---|---|
| text-align-last | Indique comment aligner la dernière ligne d'un texte |
| text-emphasis | Un raccourci pour définir le texte-accent-style et texte accent de couleur dans une déclaration |
| text-justify | Indique comment le texte justifié doit être aligné et espacées |
| text-overflow | Indique le contenu comment débordé non affiché doit être signalé à l'utilisateur |
| word-break | Indique la ligne de rupture des règles pour les scripts non-CJK |
| word-wrap | Permet de longues mots pour être en mesure d'être brisé et envelopper sur la ligne suivante |