text-transform
CSS text-transform Property
The text-transform property is used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
Some language-specific case mapping rules are taken into account by this property. Let’s go through some of them:
In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there exist two types of i, with and without the dot, and the following two case pairings: i/İ and ı/I.
In German (de) languages, the ß becomes SS in uppercase.
In Greek (el) languages, when the whole word is uppercase (ά/Α) the vowel accent is lost, except the disjunctive eta (ή/Ή).
The browser support for the language-specific cases may vary.
The “full-width” and “full-size-kana” values are experimental and not yet supported by any browser.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.textTransform = “capitalize”; |
Syntax
Syntax
text-transform: none | capitalize | uppercase | lowercase | full-width | full-width-kana | initial | inherit;
Example of the text-transform property with the “uppercase” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<p>This is some paragraph.</p>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>
Result
The “capitalize” value
The “capitalize” value
The “capitalize” value of the text-transform property capitalizes the words inside single or double quotes, as well as the first letter that comes after a hyphen. The first letter coming after a number will not be capitalized. For example, dates like “January 3th, 2019” will not become “January 3Th, 2019”. This value only capitalizes the first letters of the word, so the other letters in the word won’t change.
In the example below, we have used the “capitalize” value for the first sentence and the “lowercase” value for the second sentence:
Example of the text-transform property with the “capitalize” and “lowercase” values:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
text-transform: capitalize
}
.b {
text-transform: lowercase
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<div class="a">"Text transform property"</div>
<br/>
<div class="b">
"THIS IS SOME PARAGRAPH FOR EXAMPLE".
</div>
</body>
</html>
Example of the text-transform property with the “none” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
h2 {
text-transform: none;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>
Example of the text-transform property with the "none” value:
</h2>
</body>
</html>
Example of the text-transform property with the “initial” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
p.text {
text-transform: initial;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>text-transform: initial:</h2>
<p class="text">
Example of the text-transform property with the "initial” value:
</p>
</body>
</html>
Values
Values
| Value | Descriptions | Play it |
|---|---|---|
| none | No capitalization effects. This is default value of this property. | Play it » |
| capitalize | Makes the first character of each word uppercase. | Play it » |
| uppercase | Makes all characters of each word uppercase. | Play it » |
| lowercase | Makes all characters of each word lowercase. | Play it » |
| full-width | Makes the writing of a character (ideograms and Latin scripts) inside a square, allowing them to be aligned in Chinese or Japanese. | Play it » |
| full-size-kana | Converts all small Kana characters to the full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |