Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
-text-transform: none Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
++ 原始文字 + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
++ text-transform: none + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
``` ```css span { text-transform: none; } -strong { float: right; } +strong { + float: right; +} ``` -This demonstrates no text transformation. +这个示例展示了没有文字转换的情况。 -{{ EmbedLiveSample('none', '100%', '100px') }} +{{ EmbedLiveSample('使用“none”', '100%', '100px') }} -### 首字母大写 `capitalize`（普通） +### 使用“capitalize”（一般情况） ```html -Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
text-transform: capitalize Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
++ 原始文字 + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
++ text-transform: capitalize + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
``` ```css span { text-transform: capitalize; } -strong { float: right; } +strong { + float: right; +} ``` -This demonstrates text capitalization. +这个示例展示了首字母大写的情况。 -{{ EmbedLiveSample('首字母大写 capitalize（普通）', '100%', '100px') }} +{{ EmbedLiveSample('使用“capitalize”（一般情况）', '100%', '100px') }} -### 首字母大写（标点） +### 使用“capitalize”（标点） ```html -Initial String (this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!
text-transform: capitalize (this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!
++ 原始文字 + (this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? + ?¡transform! +
++ text-transform: capitalize + (this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? + ?¡transform! +
``` ```css span { text-transform: capitalize; } -strong { float: right; } +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. +这个示例展示了一个词的初始标点是如何被忽略的。关键字的目标是第一个字母，也就是字母或数字总类中的第一个 Unicode 字符部分。 -{{ EmbedLiveSample('首字母大写（标点）', '100%', '100px') }} +{{ EmbedLiveSample('使用“capitalize”（标点）', '100%', '100px') }} -### 首字母大写（符号） +### 使用“capitalize”（符号） ```html -Initial String ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
text-transform: capitalize ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
++ 原始文字 + ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl +
++ text-transform: capitalize + ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl +
``` ```css span { text-transform: capitalize; } -strong { float: right; } +strong { + float: right; +} +``` + +这个示例展示了初始符号是如何被忽略的。关键字的目标是第一个字母，也就是字母或数字总类中的第一个 Unicode 字符部分。 + +{{ EmbedLiveSample('使用“capitalize”（符号）', '100%', '100px') }} + +### 使用“capitalize”（荷兰语 ij 双字母字符） + +```html ++ 原始文字 + The Dutch word: "ijsland" starts with a digraph. +
++ text-transform: capitalize + The Dutch word: "ijsland" starts with a digraph. +
``` -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. +这个示例展示了荷兰语双字母字符 *ij* 必须像一个单一的字母一样处理。 -{{ EmbedLiveSample('首字母大写（符号）', '100%', '100px') }} +{{ EmbedLiveSample('使用“capitalize”（荷兰语 ij 双字母字符）', '100%', '100px') }} -### 首字母大写（荷兰 ij 有向图） +### 使用“uppercase”（一般情况） ```html -Initial String The Dutch word: "ijsland" starts with a digraph.
text-transform: capitalize The Dutch word: "ijsland" starts with a digraph.
++ 原始文字 + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
++ text-transform: uppercase + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
``` ```css span { - text-transform: capitalize; + text-transform: uppercase; +} +strong { + float: right; } -strong { float: right; } ``` -This demonstrates how the Dutch _ij_ digraph must be handled like one single letter. +这个示例展示了如何将文本转换为大写字母。 -{{ EmbedLiveSample('首字母大写（荷兰 ij 有向图）', '100%', '100px') }} +{{ EmbedLiveSample('使用“uppercase”（一般情况）', '100%', '100px') }} -### 大写字母 `uppercase`（普通） +### 使用“uppercase”（希腊语元音） ```html -Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
text-transform: uppercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
++ 原始文字 + Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα" +
++ text-transform: uppercase + Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα" +
``` ```css @@ -166,77 +270,162 @@ span { strong { float: right; } ``` -This demonstrates transforming the text to uppercase. +这个示例展示了希腊元音除了不连读的 *eta* 之外，应该没有重音，而元音对中第一个元音的重音变成了第二个元音的重音。 -{{ EmbedLiveSample('大写字母 uppercase（普通）', '100%', '100px') }} +{{ EmbedLiveSample('使用“uppercase”（希腊语元音）', '100%', '100px') }} -### 大写字母（希腊元音） +### 使用“lowercase”（一般情况） ```html -Initial String Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"
text-transform: uppercase Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"
++ 原始文字 + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
++ text-transform: lowercase + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
``` ```css span { - text-transform: uppercase; + text-transform: lowercase; } -strong { float: right; } +strong { + float: right; +} +``` + +这个示例展示了如何将文本转换为小写字母。 + +{{ EmbedLiveSample('使用“lowercase”（一般情况）', '100%', '100px') }} + +### 使用“lowercase”（希腊语 Σ） + +```html ++ 原始文字 + Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ. +
++ text-transform: lowercase + Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ. +
``` -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. +这个示例展示了希腊字母西格玛（`Σ`）是如何根据上下文转化为普通小写西格玛（`σ`）或词尾变体（`ς`）的。 -{{ EmbedLiveSample('大写字母（希腊元音）', '100%', '100px') }} +{{ EmbedLiveSample('使用“lowercase”（希腊语 Σ）', '100%', '100px') }} -### 小写字母 `lowercase`（普通） +### 使用“lowercase”（立陶宛语） ```html -Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
text-transform: lowercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
++ 原始文字 + Ĩ is a Lithuanian LETTER as is J́ +
++ text-transform: lowercase + Ĩ is a Lithuanian LETTER as is J́ +
``` ```css span { text-transform: lowercase; } -strong { float: right; } +strong { + float: right; +} ``` -This demonstrates transforming the text to lowercase. +这个示例展示了立陶宛语字母 `Ĩ` 和 `J́` 在转换为小写时保持上方的小点。 -{{ EmbedLiveSample('小写字母 lowercase（普通）', '100%', '100px') }} +{{ EmbedLiveSample('使用“lowercase”（立陶宛语）', '100%', '100px') }} -### 小写字母（希腊语 Σ） +### 使用“full-width”（一般情况） ```html -Initial String Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.
text-transform: lowercase Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.
++ 原始文字 + 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~ +
++ text-transform: full-width + 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~ +
``` ```css span { - text-transform: lowercase; + text-transform: full-width; +} +strong { + width: 100%; + float: right; } -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. +有些字符有两种格式：正常宽度和全宽度，它们具有不同的 Unicode 编码点。全宽版本可以用来将它们与亚洲的表意文字顺利混合。 -{{ EmbedLiveSample('小写字母（希腊语 Σ）', '100%', '100px') }} +{{ EmbedLiveSample('使用“full-width”（一般情况）', '100%', '175px') }} -### 全宽度 `full-width`（普通） +### 使用“full-width”（日语半角片假名） ```html -Initial String 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
text-transform: full-width 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
++ 原始文字 + ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強 +
++ text-transform: full-width + ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強 +
``` ```css span { text-transform: full-width; } -strong { width: 100%; float: right; } +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. +日语的半宽片假名被用来在 8 位字符编码中表示片假名。与普通的（全宽）片假名字符不同，一个带有 dakuten（声母标记）的字母被表示为两个码点，即字母的主体和 dakuten。在将这些字符转换为全宽时，`full-width` 将它们合并为一个代码点。 -{{ EmbedLiveSample('全宽度 full-width（普通）', '100%', '175px') }} +{{ EmbedLiveSample('使用“full-width”（日语半角片假名）', '100%', '175px') }} + +### 使用“full-size-kana” + +```html +ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ
+ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ
+ +``` + +```css +p:nth-of-type(2) { + text-transform: full-size-kana; +} +``` + +{{ EmbedLiveSample('使用“full-size-kana”', '100%', '175px') }} ## 规范 @@ -245,3 +434,7 @@ Some characters exists in two formats, normal width and a full-width, with diffe ## 浏览器兼容性 {{Compat}} + +## 参见 + +- {{cssxref("font-variant")}}