--- title: text-transform slug: Web/CSS/text-transform tags: - CSS - Layout - Propiedad CSS - Referencia - Texto translation_of: Web/CSS/text-transform ---
{{CSSRef}}

Resumen

La propiedad CSS text-transform especifica el cambio entre mayúsculas y minúsculas del texto de un elemento. Puede ser usada para que un texto aparezca completamente en mayúsculas, en minúsculas, o con la primera letra de cada palabra en mayúscula.

La propiedad text-transform toma en cuenta las reglas específicas del idioma, como:

Por otro lado, algunas reglas de mapeo específicas no son tomada en cuenta por ningun navegador, como:

El idioma es definido por el atributo HTML lang o el atributo xml:lang.

El soporte para estos casos específicos varía de un navegador a otro, véase la tabla de compatibilidad de navegadores.

{{cssinfo}}

Sintáxis

/* Valores clave */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/* Valores globales */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

Valores

capitalize

Es una palabra clave que fuerza a que la primera letra de cada palabra sea convertida a mayúscula. EL resto de caracteres no es modificado; eso significa que mantienen su tamaño original, como haya sido escrito en el texto del elemento. Una letra es cualquier caracter Unicode que sea parte de la categoría general de Letras o Números {{experimental_inline}}: esto excluye cualquier signo de puntuación o símbolos al principio de la palabra.

Los autores no deben esperar que capitalize siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos).
uppercase
Es una palabra clave que fuerza a todos los caracteres a ser convertidos a mayúsculas.
lowercase
Es una palabra clave que fuerza a todos los caracteres a ser convertidos a minúsculas.
none
Es una palabra clave que previene que sea cambiado el tamaño de los caracteres.
full-width {{experimental_inline}}
Es una palabra clave que fuerza que la escritura de un caracter, principalmente ideogramas y del alfabeto latín, abarque el espacio dentro de un cuadro, permitiendo que queden alineados al alfabeto asiático del este (como el chino o japonés).

Sintaxis formal

{{csssyntax}}

Ejemplos

none

<p>Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: none
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>

span {
  text-transform: none;
}
strong { float: right; }

Esto muestra ninguna transformación de texto.

{{ EmbedLiveSample('none', '100%', '100px') }}

capitalize (General)

<p>Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: capitalize
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

Esto muestra un texto con la primera letra de cada palabra en mayúsculas.

{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}

capitalize (Puntuación)

<p>Initial String
  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
</p>
<p>text-transform: capitalize
  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

Esto muestra cómo la puntuación inicial de una palabra es ignorada. La palabra clave busca la primera letra, que es el primer caracter Unicode que forma parte de la categoría general de Letras o Números.

{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}

capitalize (Símbolos)

<p>Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

Esto muestra cómo los símbolos iniciales son ignorados. La palabra clave busca la primera letra, que es primera caracter Unicode que forma parte de la categoría general de Letras o Números.

{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}

capitalize (Dígrafo ij holandés)

<p>Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>text-transform: capitalize
  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

Esto muestra cómo el dígrafo holandés ij debe ser manejado como una sola letra.

{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}

uppercase (General)

<p>Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: uppercase
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
  text-transform: uppercase;
}
strong { float: right; }

Esto muestra la transformación de texto a mayúsculas.

{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}

uppercase (Vocales griegas)

<p>Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>text-transform: uppercase
  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
</p>
span {
  text-transform: uppercase;
}
strong { float: right; }

Esto muestra cómo las vocales griegas, excepto la disyuntiva eta no deben tener acento, y el acento de la primera vocal en un par de vocales se convierte a diéresis en la segunda vocal.

{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}

lowercase (General)

<p>Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: lowercase
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
  text-transform: lowercase;
}
strong { float: right; }

Esto muestra la transformación de texto a minúsculas.

{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}

lowercase (Σ griega)

<p>Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>text-transform: lowercase
  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
</p>
span {
  text-transform: lowercase;
}
strong { float: right; }

Esto muestra cómo el caracter griego sigma (Σ) es trsnformado a sigma minúscula regular (σ) o a la variante de final de palabra (ς), conforme al contexto.

{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}

full-width (General)

<p>Initial String
  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
</p>
<p>text-transform: full-width
  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
</p>
span {
  text-transform: full-width;
}
strong { width: 100%; float: right; }

Algunos caracteres existen en dos formas, de anchura normal y de anchura completa, con diferentes puntos de código en Unicode. La versión de anchura completa es usada para facilitar la mezcla con caracteres ideográficos asiáticos.

{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}

Sobre Accesibilidad

Usuarios con discapacidades cognitivas como dislexia pueden encontrar dificultad al leer textos largos cuando se aplica la propiedad text-transform con el valor de uppercase.

Especificaciones

Especificación Estado Comentarios
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}} {{Spec2('CSS4 Text')}} De {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, se añade la palabra clave full-size-kana y permite que la palabra clave full-width sea usada junto con otro valor.
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}} {{Spec2('CSS3 Text')}} De {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, se extienden las letras a cualquier caracter unicode en la categoría general de Números o Letras. Modifica el comportamiento de capitalize para aplicarse a la primera letra de la palabra, ignorando símbolos iniciales. Añade la palabra clave full-width para facilitar la mezcla entre caracteres ideográficos y caracteres alfabéticos.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} {{Spec2('CSS2.1')}} De {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extiende las letras a alfabetos no latinos bicamerales
{{SpecName('CSS1', '#text-transform', 'text-transform')}} {{Spec2('CSS1')}} Definición inicial

Compatibilidad de navegadores

{{CompatibilityTable}}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 {{CompatGeckoDesktop("1")}} 4.0 7.0 1.0
capitalize (versión de CSS3) {{CompatUnknown}}[1] {{CompatGeckoDesktop("14")}}[1] {{CompatUnknown}}[1] {{CompatUnknown}}[1] {{CompatUnknown}}[1]
full-size-kana {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
full-width {{CompatNo}} {{CompatGeckoDesktop("19")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
ß → SS {{CompatUnknown}} {{CompatGeckoDesktop("1")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
i → İ e ı → I {{CompatNo}} {{CompatGeckoDesktop("14")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}}
Dígrafo holandés IJ {{CompatNo}} {{CompatGeckoDesktop("14")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Letras griegas acentuadas 30 {{CompatGeckoDesktop("15")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Σ → σ o término de palabra ς 30 {{CompatGeckoDesktop("14")}} {{CompatNo}} {{CompatNo}} 6.0
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 1.0 {{CompatGeckoMobile("1")}} 6.0 6.0 1.0
capitalize (versión de CSS3) {{CompatUnknown}}[1] {{CompatGeckoMobile("14")}}[1] {{CompatUnknown}}[1] {{CompatUnknown}}[1] {{CompatUnknown}}[1]
full-size-kana {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
full-width {{CompatNo}} {{CompatGeckoMobile("19")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
ß → SS {{CompatUnknown}} {{CompatGeckoMobile("1")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
i → İ e ı → I {{CompatNo}} {{CompatGeckoMobile("14")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}}
Dígrafo holandés IJ {{CompatNo}} {{CompatGeckoMobile("14")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Letras griegas acentuadas {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Σ → σ o término de palabra ς {{CompatNo}} {{CompatGeckoMobile("14")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

[1] La palabra clave capitalize fue pobremente especificada en CSS 1 y CSS 2.1. Había diferencias entre navegadores en la forma en que se calculaba la primera letra (Firefox consideraba - y _ como letras, pero los otros navegadores no. Tango Webkit como Gecko consideraban incorrectamente símbolos basados en letra, por ejemplo ⓐ, como letras reales. Internet Explorer 9 fue el que se apegó más a la definición de CSS 2, pero con algunos casos extraños). Definiendo detalladamente el comportamiento correcto, el Nivel 3 de Textos CSS clarifica estas confusiones. La línea capitalize en la tabla de compatibilidad de navegadores contiene la versión de los distintos motores en la que comenzaron a soportar este comportamiento mejor definido.

Véase también