text-transform
Specifies the capitalization of text such as alphabetic characters.
Sample Code
p.test { text-transform: none;}
p.test1 { text-transform: lowercase;}
p.test2 { text-transform: uppercase;}
p.test3 { text-transform: capitalize;}
Available Values
| Value | Description |
|---|---|
| none | Displays the text exactly as entered. This 'none' is the initial value. |
| lowercase | Displays all text in lowercase. |
| uppercase | Displays all text in uppercase. |
| capitalize | Displays the first letter of each word in uppercase. |
Browser Display Result
<p style="text-transform: none;">This is a p element. this is a pen.</p>
<p style="text-transform: lowercase;">This is a p element. this is a pen.</p>
<p style="text-transform: uppercase;">This is a p element. this is a pen.</p>
<p style="text-transform: capitalize;">This is a p element. this is a pen.</p>
Browser Compatibility
Desktop
Supported in all versions
8 ○
7 ○
6 ○
6 and earlier ×Mobile
Android Browser
4.4+ ○
3 and earlier ×Same support as desktop
Same support as desktop
※ Version data is based on MDN.
Details
Specifies the capitalization of text such as alphabetic characters.
Languages such as Japanese do not have the concept of uppercase and lowercase, so specifying this property on Japanese text will have no effect. Please be aware of this.
If you find any errors or copyright issues, please contact us.