Propiedad CSS text-transform
La propiedad text-transform se utiliza para que el texto aparezca en mayúsculas, en minúsculas o con la primera letra de cada palabra en mayúscula.
Esta propiedad tiene en cuenta algunas reglas de mapeo de mayúsculas y minúsculas específicas de cada idioma. Veamos algunas de ellas:
- En las lenguas túrquicas, como el turco (tr), el azerí (az), el tártaro de Crimea (crh), el tártaro del Volga (tt) y el bashkir (ba), existen dos tipos de "i", con y sin punto, y las siguientes dos combinaciones de mayúsculas/minúsculas: i/İ y ı/I.
- En el idioma alemán (de), la letra ß se convierte en SS en mayúsculas.
- En el idioma griego (el), cuando toda la palabra está en mayúsculas (ά/Α), el acento vocálico se pierde, excepto en la eta disyuntiva (ή/Ή).
El soporte del navegador para los casos específicos de cada idioma puede variar.
advertencia
Los valores
full-widthyfull-size-kanason experimentales.full-widthtiene un soporte parcial en WebKit, mientras quefull-size-kanatiene un 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
Sintaxis de la propiedad CSS text-transform
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;Ejemplo de la propiedad text-transform con el valor "uppercase":
Ejemplo de la propiedad CSS text-transform con el valor uppercase
<!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
El valor "capitalize"
El valor "capitalize" de la propiedad text-transform convierte en mayúscula la primera letra de las palabras dentro de comillas simples o dobles, así como la primera letra que sigue a un guion. La primera letra que sigue a un número no se convertirá en mayúscula. Por ejemplo, fechas como “January 3th, 2019” no se convertirán en “January 3Th, 2019”. Este valor solo convierte en mayúscula la primera letra de cada palabra, por lo que las demás letras no cambiarán.
En el siguiente ejemplo, hemos utilizado el valor "capitalize" para la primera frase y el valor "lowercase" para la segunda frase:
Ejemplo de la propiedad text-transform con los valores "capitalize" y "lowercase":
Ejemplo de la propiedad CSS text-transform con los valores capitalize y 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>Ejemplo de la propiedad text-transform con el valor "none":
Ejemplo de la propiedad text-transform con el valor "none":
<!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>Ejemplo de la propiedad text-transform con el valor "initial":
Ejemplo de la propiedad text-transform con el valor "initial":
<!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 | Probarlo |
|---|---|---|
| none | Sin efectos de capitalización. Este es el valor predeterminado de esta propiedad. | Probarlo » |
| capitalize | Convierte en mayúscula el primer carácter de cada palabra. | Probarlo » |
| uppercase | Convierte en mayúscula todos los caracteres de cada palabra. | Probarlo » |
| lowercase | Convierte en minúscula todos los caracteres de cada palabra. | Probarlo » |
| full-width | Convierte la escritura de un carácter (ideogramas y alfabetos latinos) dentro de un cuadrado, permitiendo que se alineen en chino o japonés. | Probarlo » |
| full-size-kana | Convierte todos los caracteres Kana pequeños en Kana de tamaño completo, para compensar problemas de legibilidad con los tamaños de fuente pequeños que se suelen usar en ruby. | Probarlo » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cómo haces que cada palabra en un texto comience con una letra mayúscula?