text-transform

text-transform CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。

示例

/* 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;

浏览器支持


IE10以上版本浏览器支持`text-transform`

语法:

text-transform:none| capitalize| uppercase| lowercase| full-width

取值:

none:无转换
capitalize:将每个单词的第一个字母转换成大写
uppercase:将每个单词转换成大写
lowercase:将每个单词转换成小写
full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）

说明:

检索或设置对象中的文本的大小写。

对应的脚本特性为textTransform。

text-transform属性考虑特定于语言的案例映射规则，如：

在突厥语中，例如土耳其语（tr），阿塞拜疆语（az），克里米亚Ta语（crh），伏尔加语tar（tt）和巴什基尔语（ba），有两种i，带和不带点，以及两种大小写对： i/İ和ı/ I。
在德语（de）中，ß变为 SS 大写。
在荷兰语（nl）中，有 ij 向图变为 IJ，即使带有 text-transform: capitalize，也仅将单词的首字母大写。
在希腊文（el）中，当整个单词为大写（ά/Α）时，元音会失去重音，但析取式（ή/Ή）除外。另外，在第一个元音上带有重音的双音会丢失该重音，而在第二个元音（άι/ΑΪ）上具有变音符号。
在希腊文（el）中，小写的sigma字符有两种形式：σ和ς。ς仅在sigma终止单词时使用。当应用于 text-transform: lowercase 大写sigma（Σ）时，浏览器需要根据上下文选择正确的小写形式。

在其他一些其他特定的情况下，映射规则不被任何浏览器考虑在内：

在Gaelic（ga）中，当基本首字母大写时，前缀字母保留为小写，因此在此示例中， h-不应将其大写：应 text-transform: uppercase 更改 Meud na h-aplacaid 为 MEUD NA H-APLACAID 违反区域拼字法则的规则 MEUD NA h-APLACAID.语言由 lang HTML属性或 xml:lang XML属性定义。

默认值	none
适用于	所有元素
继承性	有
动画性	否
计算值	指定值

实例

h1{text-transform:uppercase;}
h2{text-transform:capitalize;}
p{text-transform:lowercase;}

首字母大写(标点)

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

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

初始字符串 Lorem ipsum dolor sit amet, consectetur adipisicing elit,...

文本转换：大写 Lorem ipsum dolor sit amet, consectetur adipisicing elit,...

首字母大写(符号)

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

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