La text-transformproprietà in CSS controlla le maiuscole e le minuscole.
.lowercase ( text-transform: lowercase; )Valori di trasformazione del testo
lowercaserende minuscole tutte le lettere del testo selezionato.uppercaserende maiuscole tutte le lettere del testo selezionato.capitalizerende maiuscola la prima lettera di ogni parola nel testo selezionato.nonelascia le maiuscole e le minuscole del testo esattamente come sono state inserite.inheritfornisce al testo le maiuscole e le minuscole del suo genitore.
La demo qui sotto mostra lowercase, uppercasee capitalizein uso. Dai un'occhiata alla scheda HTML per vedere come è stato scritto originariamente il testo, quindi torna alla scheda dei risultati per vederlo dopo l'applicazione del CSS.
Guarda la penna 0f4293fce0d14aafc3818c950ab0ded3 di mariemosley (@mariemosley) su CodePen.
Punti di interesse
capitalizemetterà in maiuscolo le parole che compaiono tra virgolette singole o doppie e la prima lettera dopo un trattino. Non sarà in maiuscolo la prima lettera dopo un numero, quindi date come "4 febbraio 2015" non si trasformeranno in "4 febbraio 2015".
capitalizeinfluisce solo sulle prime lettere delle parole. Non cambierà il caso del resto delle lettere in una parola. Ad esempio, se capitalizeuna parola è già tutta maiuscola, le altre lettere della parola non cambieranno in minuscolo. Questo è utile quando il tuo testo include un acronimo o un'abbreviazione che non dovrebbe includere lettere minuscole.
I CSS non possono utilizzare "maiuscole e minuscole", lo stile di maiuscolo utilizzato nei titoli di libri, film, canzoni e poesie, dove gli articoli sono minuscoli (come in "I predatori dell'arca perduta"). Ma esistono soluzioni JavaScript per le maiuscole / minuscole, incluso toTitleCase () di David Gouch.
Maggiori informazioni
- trasformazione del testo in MDN
- text-transform nelle specifiche W3C
- Note sull'accessibilità del testo in maiuscolo da WebAIM
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | Qualunque | Qualunque | Qualunque | Qualunque | Qualunque | Qualunque |
Firefox supporta le regole di capitalizzazione specifiche della lingua per le lingue turca, tedesco, olandese e greco che non sono supportate da altri browser. Firefox è anche l'unico browser che supporta text-transform: full-width;, il che può aiutare a migliorare la leggibilità del testo che include una combinazione di script latini e asiatici. Vedi i dettagli su MDN.
