text-transform (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| Yes | none |
CSS1, 2 |
Example
These style rules make
h1 headings use only uppercase letters, while the first
letter of each word in h2 headings will be
uppercased:
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}Description
This property controls if and how an element’s text content is capitalized.
Value
capitalize- transforms the first character in each word to uppercase; all other characters remain unaffected—they’re not transformed to lowercase, but will appear as written in the document
lowercase- transforms all characters to lowercase
none- produces no capitalization effect at all
uppercase- transforms all characters to uppercase
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Note that the concept of what constitutes a word depends on the language in which the content is presented, and differs between browsers. Opera and Firefox will capitalize text-transform as Text-transform, while Internet Explorer for Windows will capitalize it as Text-Transform.
In Internet Explorer for Windows
versions up to and including 7, the values lowercase
and uppercase behave like none
if the font-variant property is set to
small-caps.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
