La text-transformpropiedad en CSS controla las mayúsculas y minúsculas del texto.
.lowercase ( text-transform: lowercase; )Valores de transformación de texto
lowercaseconvierte todas las letras del texto seleccionado en minúsculas.uppercaseconvierte todas las letras del texto seleccionado en mayúsculas.capitalizepone en mayúscula la primera letra de cada palabra en el texto seleccionado.nonedeja el caso del texto y las mayúsculas exactamente como se ingresó.inheritle da al texto las mayúsculas y minúsculas de su padre.
La demostración siguiente muestra lowercase, uppercasey capitalizeen uso. Eche un vistazo a la pestaña HTML para ver cómo se escribió originalmente el texto, luego vuelva a la pestaña de resultados para verlo después de aplicar el CSS.
Vea el Pen 0f4293fce0d14aafc3818c950ab0ded3 por mariemosley (@mariemosley) en CodePen.
Puntos de interés
capitalizepondrá en mayúscula las palabras que aparecen entre comillas simples o dobles, y la primera letra después de un guión. No escribirá en mayúscula la primera letra después de un número, por lo que fechas como "4 de febrero de 2015" no se transformarán en "4 de febrero de 2015".
capitalizesolo afecta a las primeras letras de las palabras. No cambiará el caso del resto de letras de una palabra. Por ejemplo, si capitalizeuna palabra que ya está en mayúsculas, las otras letras de la palabra no cambiarán a minúsculas. Esto es bueno cuando su texto incluye un acrónimo o abreviatura que no debe incluir letras minúsculas.
CSS no puede usar "mayúsculas y minúsculas", el estilo de uso de mayúsculas que se usa en los títulos de libros, películas, canciones y poemas, donde los artículos están en minúsculas (como en "En busca del arca perdida"). Sin embargo, existen soluciones JavaScript para el caso del título, incluido toTitleCase () de David Gouch.
Más información
- transformación de texto en MDN
- transformación de texto en la especificación W3C
- Notas sobre la accesibilidad del texto en mayúsculas de WebAIM
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | Alguna | Alguna | Alguna | Alguna | Alguna | Alguna |
Firefox admite reglas de uso de mayúsculas específicas del idioma para los idiomas turco, alemán, holandés y griego que no son compatibles con otros navegadores. Firefox es también el único navegador compatible text-transform: full-width;, lo que puede ayudar a mejorar la legibilidad del texto que incluye una mezcla de escrituras latinas y del este de Asia. Consulte los detalles en MDN.