Propiedad CSS text-transform
Usa la propiedad text-transform para controlar los efectos de capitalización del texto de un elemento. Ve los valores y prueba ejemplos.
La propiedad CSS text-transform controla la capitalización del texto de un elemento — puede forzar el texto a MAYÚSCULAS, minúsculas, o Capitalizar Cada Palabra, sin cambiar el HTML subyacente. Se trata de un cambio puramente presentacional: el texto fuente permanece exactamente como lo escribiste, por lo que los lectores de pantalla, el copiar y pegar, y el envío de formularios siguen viendo el formato original.
Esta página cubre todos los valores de text-transform, los problemas comunes del valor capitalize, la conversión de mayúsculas/minúsculas específica de cada idioma y ejemplos ejecutables para cada valor.
¿Por qué usar text-transform en lugar de escribir directamente las mayúsculas?
Mantener el formato de mayúsculas en CSS en lugar de en el marcado mantiene tu contenido limpio y flexible:
- Una única fuente de verdad. Escribe encabezados y etiquetas en mayúscula normal de oración; deja que CSS los convierta a mayúsculas solo donde el diseño lo requiera. Cambia el diseño más adelante en un solo lugar.
- Favorable para la localización. Los traductores editan texto legible, no capitales que gritan.
- Accesibilidad y SEO. Los motores de búsqueda y las tecnologías de asistencia leen el texto real, no los glifos con estilo. Convertir visualmente a mayúsculas la etiqueta de un
<button>de esta forma sigue exponiendo un nombre accesible en formato normal.
Conversión de mayúsculas/minúsculas específica del idioma
text-transform sigue las reglas de capitalización del idioma del contenido (el atributo lang), no una conversión ASCII simple. Algunos casos destacados:
- Lenguas túrquicas — el turco (
tr), el azerbaiyano (az), el tártaro de Crimea (crh), el tártaro del Volga (tt) y el baskir (ba) tienen i con y sin punto, lo que da dos pares de mayúscula/minúscula: i/İ e ı/I. - Alemán (
de) — la ß se convierte en SS en mayúsculas. - Griego (
el) — cuando una palabra entera se convierte a mayúsculas, el acento de la vocal se elimina (ά → Α), excepto para la eta disyuntiva (ή/Ή).
La compatibilidad del navegador con estas reglas específicas del idioma varía, así que prueba si tu audiencia depende de ellas.
Los valores full-width y full-size-kana son experimentales. full-width tiene soporte parcial en WebKit, mientras que full-size-kana tiene soporte muy limitado.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | Sí. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.textTransform = "capitalize"; |
Sintaxis
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;El valor "uppercase"
uppercase convierte cada carácter a su forma en mayúsculas — el uso más habitual es para encabezados, botones y etiquetas. En el ejemplo siguiente, el texto del párrafo y del <div> se fuerzan a mayúsculas mientras el HTML mantiene su formato normal:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<p>This is some paragraph.</p>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Resultado
Los valores "capitalize" y "lowercase"
capitalize convierte a mayúscula la primera letra de cada palabra y deja el resto de cada palabra sin cambios. Un límite de "palabra" es cualquier espacio en blanco, puntuación o símbolo, por lo que las comillas y los guiones también inician nuevas palabras (p. ej., mother-in-law se convierte en Mother-In-Law). Dos problemas comunes:
- Solo afecta a la primera letra —
iPhonese convierte enIPhone, no enIphone, porque el formato existente de las letras restantes se conserva. - Un dígito no cuenta como letra, por lo que la primera letra después de un número no se capitaliza.
3rdpermanece como3rd, nunca3Rd.
lowercase es lo contrario de uppercase: fuerza cada carácter a minúsculas. En el ejemplo siguiente, el primer <div> usa capitalize y el segundo usa lowercase:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
text-transform: capitalize
}
.b {
text-transform: lowercase
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<div class="a">"Text transform property"</div>
<br />
<div class="b">
"THIS IS SOME PARAGRAPH FOR EXAMPLE".
</div>
</body>
</html>El valor "none"
none es el valor predeterminado — el texto se muestra exactamente como está escrito, sin ningún efecto de capitalización. Se usa principalmente para cancelar un text-transform que un elemento heredaría de otro modo, ya que la propiedad se hereda de forma predeterminada.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
h2 {
text-transform: none;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>
Example of the text-transform property with the "none" value:
</h2>
</body>
</html>El valor "initial"
initial restablece la propiedad a su valor predeterminado definido en CSS (none), independientemente de cualquier valor heredado. El ejemplo siguiente restablece text-transform en un párrafo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
p.text {
text-transform: initial;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>text-transform: initial:</h2>
<p class="text">
Example of the text-transform property with the "initial" value:
</p>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| none | Sin efectos de capitalización. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| capitalize | Convierte el primer carácter de cada palabra a mayúscula. | Pruébalo » |
| uppercase | Convierte todos los caracteres de cada palabra a mayúsculas. | Pruébalo » |
| lowercase | Convierte todos los caracteres de cada palabra a minúsculas. | Pruébalo » |
| full-width | Hace que la escritura de un carácter (ideogramas y escrituras latinas) quede dentro de un cuadrado, permitiendo alinearlos con el chino o el japonés. | Pruébalo » |
| full-size-kana | Convierte todos los caracteres Kana pequeños al Kana de tamaño completo, para compensar problemas de legibilidad en los tamaños de fuente pequeños que se usan típicamente en ruby. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
text-transform es una de varias herramientas CSS para dar forma al aspecto del texto. Combínala con estas propiedades relacionadas:
- text-decoration — subrayado, línea superior o tachado del texto.
- font-variant — muestra el texto en versalitas (una variante tipográfica real, a diferencia de las mayúsculas visuales).
- letter-spacing y word-spacing — combina bien con encabezados en mayúsculas, que a menudo se leen mejor con un espaciado adicional.
- text-align — controla la alineación horizontal del texto transformado.
- ::first-letter y ::first-line —
text-transformtambién se aplica a estos pseudoelementos, útil para efectos de capitular.