text-transform
CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
text-transform
property takes into account language-specific case mapping rules such as the following:
In Turkic languages, like Turkish (
tr
), Azerbaijani (
az
), Crimean Tatar (
crh
), Volga Tatar (
tt
), and Bashkir (
ba
), there are two kinds of
i
, with and without the dot, and two case pairings:
i
/
İ
and
ı
/
I
.
In German (
de
), the
ß
becomes
SS
in uppercase.
In Dutch (
nl
), the
ij
digraph becomes
IJ
, even with
text-transform: capitalize
, which only puts the first letter of a word in uppercase.
In Greek (
el
), vowels lose their accent when the whole word is in uppercase (
ά
/
Α
), except for the disjunctive
eta
(
ή
/
Ή
). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (
άι
/
ΑΪ
).
In Greek (
el
), the lowercase sigma character has two forms:
σ
and
ς
.
ς
is used only when sigma terminates a word. When applying
text-transform: lowercase
to an uppercase sigma (
Σ
), the browser needs to choose the right lowercase form based on context.
ga
), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example
text-transform: uppercase
will change
ar aon tslí
to
AR AON tSLÍ
and not, as one might expect,
AR AON TSLÍ
(Firefox only). In some cases, a hyphen is also removed upon uppercasing:
an t-uisce
transforms to
AN tUISCE
(and the hyphen is correctly reinserted by
text-transform: lowercase
).
The language is defined by the
lang
HTML attribute or the
xml:lang
XML attribute.
注意： Support for language-specific cases varies between browsers, so check the browser compatibility table .
/* Keyword values */ text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: full-size-kana; /* Global values */ text-transform: inherit; text-transform: initial; text-transform: unset;
capitalize
Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text). A letter is defined as a character that is part of Unicode's Letter or Number general categories ; thus, any punctuation marks or symbols at the beginning of a word are ignored.
Authors should not expect
capitalize
to follow language-specific title casing conventions (such as skipping articles in English).
capitalize
keyword was under-specified in CSS 1 and CSS 2.1. This resulted in differences between browsers in the way the first letter was calculated (Firefox considered
-
and
_
as letters, but other browsers did not. Both Webkit and Gecko incorrectly considered letter-based symbols like
ⓐ
to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases.) By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The
capitalize
line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior.
uppercase
Is a keyword that converts all characters to uppercase.
lowercase
Is a keyword that converts all characters to lowercase.
none
Is a keyword that prevents the case of all characters from being changed.
full-width
Is a keyword that 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).
full-size-kana
<ruby>
annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.
Large sections of text set with a
text-transform
value of
uppercase
may be difficult for people with cognitive concerns such as Dyslexia to read.
| 初始值 |
none
|
|---|---|
| 适用于 |
所有元素。它还适用于
::first-letter
and
::first-line
.
|
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
none | capitalize | uppercase | lowercase | full-width | full-size-kana
none
<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: none <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
span {
text-transform: none;
}
strong { float: right; }
This demonstrates no text transformation.
<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: capitalize <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
span {
text-transform: capitalize;
}
strong { float: right; }
This demonstrates text capitalization.
<p>Initial String <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong> </p> <p>text-transform: capitalize <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong> </p>
span {
text-transform: capitalize;
}
strong { float: right; }
This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.
<p>Initial String <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> </p> <p>text-transform: capitalize <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong> </p>
span {
text-transform: capitalize;
}
strong { float: right; }
This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.
<p>Initial String <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong> </p> <p>text-transform: capitalize <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong> </p>
span {
text-transform: capitalize;
}
strong { float: right; }
This demonstrates how the Dutch ij digraph must be handled like one single letter.
<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: uppercase <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
span {
text-transform: uppercase;
}
strong { float: right; }
This demonstrates transforming the text to uppercase.
<p>Initial String <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> </p> <p>text-transform: uppercase <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> </p>
span {
text-transform: uppercase;
}
strong { float: right; }
This demonstrates how Greek vowels except disjunctive eta should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.
<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: lowercase <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
span {
text-transform: lowercase;
}
strong { float: right; }
This demonstrates transforming the text to lowercase.
<p>Initial String <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong> </p> <p>text-transform: lowercase <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong> </p>
span {
text-transform: lowercase;
}
strong { float: right; }
This demonstrates how the Greek character sigma (
Σ
) is transformed into the regular lowercase sigma (
σ
) or the word-final variant (
ς
), according the context.
<p>Initial String <strong>Ĩ is a Lithuanian LETTER as is J́</strong> </p> <p>text-transform: lowercase <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong> </p>
span {
text-transform: lowercase;
}
strong { float: right; }
This demonstrates how the Lithuanian letters
Ĩ
and
J́
retain their dot when transformed to lowercase.
<p>Initial String
<strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
</p>
<p>text-transform: full-width
<strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
</p>
span {
text-transform: full-width;
}
strong { width: 100%; float: right; }
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.
<p>Initial String <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong> </p> <p>text-transform: full-width <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong> </p>
span {
text-transform: full-width;
}
strong { width: 100%; float: right; }
The Japanese half-width katakana was used to represent katakana in 8-bit character codes. Unlike regular (full-width) katakana characters, a letter with dakuten (voiced sound mark) is represented as two code points, the body of letter and dakuten. The
full-width
combines these into a single code point when converting these characters into full-width.
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> </p>
p:nth-of-type(2) {
text-transform: full-size-kana;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Text Module Level 3
The definition of 'text-transform' in that specification. |
工作草案 |
From
CSS Level 2 (Revision 1)
The definition of 'text-transform' in that specification. , extends letters to any Unicode character in the Number or Letter general category. Modifies the behavior of
capitalize
to apply to the first letter of the word, ignoring initial punctuations or symbols. Adds the
full-width
and
full-size-kana
keywords.
|
|
CSS Level 2 (Revision 1)
The definition of 'text-transform' in that specification. |
推荐 |
From
CSS Level 1
The definition of 'text-transform' in that specification. , extends letters to non-latin bi-cameral scripts |
|
CSS Level 1
The definition of 'text-transform' in that specification. |
推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-transform
|
Chrome
完整支持
1
注意事项
|
Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 4 |
Opera
完整支持
7
注意事项
|
Safari
完整支持
1
注意事项
|
WebView Android
完整支持
1
注意事项
|
Chrome Android
完整支持
18
注意事项
|
Firefox Android 完整支持 4 | Opera Android 完整支持 11 |
Safari iOS
完整支持
1
注意事项
|
Samsung Internet Android
完整支持
1.0
注意事项
|
capitalize
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1
注意事项
|
IE 完整支持 4 | Opera 完整支持 7 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 |
Firefox Android
完整支持
4
注意事项
|
Opera Android 完整支持 11 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
Dutch
IJ
digraph
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 14 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 14 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
full-size-kana
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 64 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 64 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
full-width
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 19 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 19 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
| Greek accented letters | Chrome 完整支持 34 | Edge 完整支持 79 | Firefox 完整支持 15 | IE 不支持 No | Opera 完整支持 21 | Safari 不支持 No | WebView Android 完整支持 4.4 | Chrome Android 完整支持 34 | Firefox Android 完整支持 15 | Opera Android 完整支持 21 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 2.0 |
Σ
→
σ
or word-final
ς
|
Chrome 完整支持 30 | Edge 完整支持 12 | Firefox 完整支持 14 | IE 完整支持 4 | Opera 完整支持 17 | Safari 完整支持 6 | WebView Android 完整支持 4.4 | Chrome Android 完整支持 30 | Firefox Android 完整支持 14 | Opera Android 完整支持 18 | Safari iOS 完整支持 6 | Samsung Internet Android 完整支持 2.0 |
i
→
İ
and
ı
→
I
|
Chrome 完整支持 31 | Edge 完整支持 12 | Firefox 完整支持 14 | IE 完整支持 4 | Opera 完整支持 18 | Safari 完整支持 8 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 31 | Firefox Android 完整支持 14 | Opera Android 完整支持 18 | Safari iOS 完整支持 8 | Samsung Internet Android 完整支持 2.0 |
ß
→
SS
|
Chrome 完整支持 1 | Edge 完整支持 18 | Firefox 完整支持 1 | IE 不支持 No | Opera 完整支持 7 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 11 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
不支持
见实现注意事项。