| Definición | Transforma el texto de un elemento para mostrarlo en mayúsculas, minúsculas o una mezcla de ambas |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | none |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/text.html#propdef-text-transform |
Ejemplos de uso
La propiedad text-transform permite transformar el texto de un elemento para mostrarlo en mayúsculas, minúsculas o una mezcla de ambas. Los cuatro valores definidos por esta propiedad son los siguientes:
lowercase: muestra todo el texto del elemento con letras minúsculas.uppercase: muestra todo el texto del elemento con letras mayúsculas.capitalize: muestra la primera letra de cada palabra en mayúscula y el resto de letras en minúsculas.none: muestra el texto tal y como está escrito, respetando todas las mayúsculas y minúsculas.
A continuación se muestran ejemplos del resultado de aplicar cada uno de los valores anteriores:
text-transform: none Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
text-transform: lowercase Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
text-transform: uppercase Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
text-transform: capitalize Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Aunque los valores uppercase, lowercase y capitalize apenas se utilizan en elementos como los párrafos de texto, se pueden emplear en elementos como los titulares de la página (<h1>, <h2>, ..., <h6>) para conseguir efectos visuales interesantes.
La propiedad text-transform también tiene en cuenta el texto generado dinámicamente mediante propiedades como content:
p {
text-transform: capitalize;
}
p:before {
content: "texto generado dinámicamente ";
}
<p>Lorem ipsum dolor sit amet...</p>Las reglas CSS anteriores producen el siguiente resultado:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.