text-transform
En esta página
| Clase | Propiedades CSS |
|---|---|
uppercase |
text-transform: uppercase; |
lowercase |
text-transform: lowercase; |
capitalize |
text-transform: capitalize; |
normal-case |
text-transform: none; |
Examples#
Uppercasing text#
Use the uppercase utility to uppercase the text of an element:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:uppercase] -->
<p class="uppercase">The quick brown fox ...</p>
Lowercasing text#
Use the lowercase utility to lowercase the text of an element:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:lowercase] -->
<p class="lowercase">The quick brown fox ...</p>
Capitalizing text#
Use the capitalize utility to capitalize text of an element:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:capitalize] -->
<p class="capitalize">The quick brown fox ...</p>
Resetting text casing#
Use the normal-case utility to preserve the original text casing of an element—typically used to reset capitalization at different breakpoints:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:normal-case] -->
<p class="normal-case">The quick brown fox ...</p>