CSS Reference Property

text-transform 3j59m

The text-transform property specifies how words or individual letters are displayed in capital letters. 4j4jv

It can be used to display text in all-uppercase letters, all-lowercase, or to capitalize words (make first letter of each word a capital letter).

Official Syntax 3xs5l

  • Syntax:

    text-transform: none | capitalize | uppercase | lowercase | full-width
  • Initial: none
  • Applies To: all elements
  • Animatable: no

Values u704t

none
No effect is applied to the text. It prevents any change to the case of the characters.
capitalize
Converts the first letter of each word to uppercase. Other letters in each word are not affected, they retain their original case (whether upper or lower) as written in the element’s text source.
uppercase
forces all letters to uppercase.
lowercase
forces all letters to lowercase.
full-width

Forces the writing of a character, mainly ideograms and Latin scripts inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters. If the character does not have a corresponding full width form, it is left as is.

Notes 441w3q

The text-transform property cascades, so you may want or need to reset its value (set it to none) on an element’s child to prevent the text inside that child from being affected by the transformation of its parent.

Examples 2h2053

The following forces all the h1 elements to be displayed in all-uppercase letters.

h1 {
  text-transform: uppercase;
}
                

The following will capitalize each word in all the h2 tags.

h2 {
  text-transform: capitalize;
}
                

Browser 572e63

The text-transform property is ed in all major browsers: Chrome, Firefox, Safari, Opera, IE and on Android and iOS.

Notes 441w3q

The full-width value is only ed in Firefox at this time starting from version 19.0.

The CSS Text Level Module 4 adds a new value full-size-kana which is still experimental and not yet ed by any browser.

Further Reading 4s104w

Written by

Last updated June 4, 2020 at 4:20 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.