文本转换 | text-transform

该text-transformCSS属性指定如何利用元素的文本。它可以用来使文本全部大写或全部小写，或每个单词大写。

/* Keyword values */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

该text-transform属性考虑到特定于语言的大小写映射规则，如：

在土耳其语中，土耳其语（tr），阿塞拜疆语（az），克里米亚鞑靼语（crh），伏尔加塔塔尔语tt和巴什基尔语等突厥语言中，ba有两种类型，有和没有点，以及两种情况配对：i/ İ和ı/ I。

在德国（de），则ß变成SS大写。

在荷兰语（nl）中，双ij字母变成IJ，即使是text-transform: capitalize，也只是把大写字母的第一个字母。

在希腊语（el）中，当整个单词大写（ά/ Α）时，元音会失去重音，除了析取的eta（ή/ Ή）。另外，对第一个元音有重音的双元音会失去重音，并在第二个元音（άι/ ΑΪ）上获得分音。

在希腊语（el）中，小写的西格玛字符有两种形式：σ和ς。ς只有在西格玛终止一个字时才使用。在应用text-transform: lowercase大写sigma（Σ）时，浏览器需要根据上下文选择正确的小写形式。

在爱尔兰语（ga）中，当基本初始字母大写时，某些前缀字母保持小写，所以例如text-transform: uppercase将会改变ar aon tslí为AR AON tSLÍ和不是，如所期望的那样AR AON TSLÍ（仅限于Firefox）。在某些情况下，连字符在大写时也被删除：an t-uisce转换为AN tUISCE（连字符被正确地重新插入text-transform: lowercase）

语言由langHTML属性或xml:langXML属性

对于这些特定情况的支持因浏览器而异，因此请检查浏览器兼容性表。

Initial value	none
应用对象	all elements. It also applies to ::first-letter and ::first-line.
是否可继承	yes
媒体	visual
计算值	as specified
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

capitalize

是一个关键字强制每个单词的第一个字母转换为大写。其他字符不变; 也就是说，他们保留原文写在元素的文本中。字母是“字母”或“数字”常规类别的任何Unicode字符部分：它不包括单词开始处的任何标点符号或符号。

作者不应期望capitalize遵循语言特定的标题约定（例如跳过英文文章）。

uppercase是关键字强制所有字符被转换为大写。lowercase是一个关键字强制所有字符转换为小写。

none是一个关键字，防止所有字符的情况下被改变。

full-width是一个关键字强制在一个正方形内写入一个字符，主要是表意文字和拉丁脚本，使它们能够在通常的东亚脚本（如中文或日文）中对齐。

形式语法

none | capitalize | uppercase | lowercase | full-width

实例

`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; }

这说明没有文本转换。

`capitalize` （通常情况）

<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; }

这说明了文本大写化。

`capitalize` （标点）

<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; }

这说明如何忽略一个单词的初始标点符号。关键字定位第一个字母，即Letter或Number常规类别的第一个Unicode字符部分。

`capitalize` （符号）

<p>Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>

span {
  text-transform: capitalize;
}
strong { float: right; }

这演示了初始符号如何被忽略。关键字定位第一个字母，即Letter或Number常规类别的第一个Unicode字符部分。

`capitalize`（Dutch ij digraph）

<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; }

这表明 Dutch ij digraph必须像单个字母一样处理。

`uppercase` （一般）

<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; }

这演示了将文本转换为大写。

`uppercase` （希腊元音）

<p>Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>text-transform: uppercase
  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
</p>

span {
  text-transform: uppercase;
}
strong { float: right; }

这说明了希腊元音除了析取之外是如何的。埃塔应该没有重音，元音对的第一个元音上的重音在第二个元音上变成了一个双关音。

`lowercase` （一般）

<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; }

这演示了将文本转换为小写。

`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; }

这说明希腊字符sigma（Σ）如何根据上下文转换为常规小写sigma（σ）或单词final变体（ς）。

`full-width` （一般）

<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; }

一些字符以两种格式存在，即正常宽度和全宽度，具有不同的Unicode代码点。全角版本是用来与亚洲的表意文字顺利混合。

规范

Specification	Status	Comment
CSS Text Level 4The definition of 'text-transform' in that specification.	Working Draft	From CSS Text Module Level 3The definition of 'text-transform' in that specification., adds the full-size-kana keyword and allows the full-width keyword to be used together with another keyword.
CSS Text Module Level 3The definition of 'text-transform' in that specification.	Working Draft	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 keyword to mix smoothly ideographic characters and alphabetical characters.
CSS Level 2 (Revision 1)The definition of 'text-transform' in that specification.	Recommendation	From CSS Level 1The definition of 'text-transform' in that specification., extends letters to non-latin bi-cameral scripts
CSS Level 1The definition of 'text-transform' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.01	(Yes)	1.0 (1.7 or earlier)	4.0	7.02	1.03
capitalize (CSS3 version)	?4	?	14 (14)4	?4	?4	?4
full-size-kana	No support	?	No support	No support	No support	No support
full-width	No support	?	19 (19)	No support	No support	No support
ß → SS	?	?	1.0 (1.7 or earlier)	?	?	?
i → İ and ı → I	No support	?	14 (14)	?	?	No support
Dutch IJ digraph	No support	?	14 (14)	No support	No support	No support
Greek accented letters	30	?	15 (15)	No support	No support	No support
Σ → σ or word-final ς	30	?	14 (14)	No support	No support	6.0

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.01	(Yes)	1.0 (1)	6.0	6.0[2	1.03
capitalize (CSS3 version)	?4	?	14.0 (14)4	?4	?4	?4
full-size-kana	No support	?	No support	No support	No support	No support
full-width	No support	?	19.0 (19)	No support	No support	No support
ß → SS	?	?	1.0 (1)	?	?	?
i → İ and ı → I	No support	?	14.0 (14)	?	?	No support
Dutch IJ digraph	No support	?	14.0 (14)	No support	No support	No support
Greek accented letters	No support	?	No support	No support	No support	No support
Σ → σ or word-final ς	No support	?	14.0 (14)	No support	No support	No support

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18

语法

形式语法

实例

none

capitalize （通常情况）

capitalize （标点）

capitalize （符号）

capitalize（Dutch ij digraph）

uppercase （一般）

uppercase （希腊元音）

lowercase （一般）

lowercase （希腊语Σ）

full-width （一般）

规范