Résumé
La propriété CSS text-transform définit comment mettre le gérer la casse du texte d'un élément. Il est ainsi possible d'afficher un texte tout en lettres capitales, tout en minuscules ou tous les mots avec leur première lettre capitale.
- Valeur initiale
none - S'applique à tous les éléments
- Héritée oui
- Pourcentages —
- Média
visual - Valeur calculée comme spécifié
- Animable non
- Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle
Syntaxe
text-transform: capitalize | uppercase | lowercase | none | inherit
Valeurs
-
capitalize - La première lettre de chaque mot est transformée en lettre capitale. Les autres lettres sont inchangées ; c'est à dire qu'elles conservent leur casse originale du texte de l'élément.
-
uppercase - Toutes les lettres deviennent des lettres capitales.
-
lowercase - Toutes les lettres deviennent des minuscules.
-
none - La casse des lettres est inchangée.
Exemples
p { text-transform: none; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
p { text-transform: capitalize; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
p { text-transform: uppercase; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
p { text-transform: lowercase; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Spécifications
Compatibilité des navigateurs
| Fonction | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support de base | 1.0 | 1.0 (1.7 ou moins) | 4.0 | 7.0 | 1.0 |
| Fonction | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support de base | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
Voir également
font-variant- Text-related properties:
letter-spacing,text-align,text-decoration,text-decoration-color,text-decoration-line,text-decoration-style,text-rendering,text-shadow,text-transform,text-indent,white-space,word-spacing