text-transform

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

尝试一下

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

  • 在突厥语系中,如土耳其语(tr)、阿塞拜疆语(az)、克里米亚鞑靼语(crh)、伏尔加鞑靼语(tt)和巴什基尔语(ba),有带点和不带点的两种 i,以及两种情况的配对: i/İı/I
  • 在德语中(de),ß 的大写形式为 SS
  • 在荷兰语中(nl),ij 双字母变为 IJ,即使设置了 text-transform: capitalize,该属性只大写单词的第一个字母。
  • 在希腊语中(el),当整个单词是大写的时候,元音会失去重音(ά/Α),除了不连贯的 eta(ή/Ή)。另外,在第一个元音上有重音的双元音会失去重音,在第二个元音上获得重音(άι/ΑΪ)。
  • 在希腊语中(el),小写的西格玛字符有两种形式:σςς 只在西格玛结束一个词的时候使用。当对大写西格玛(Σ)应用 text-transform: lowercase 时,浏览器需要根据上下文选择正确的小写形式。
  • 在爱尔兰语中(ga),某些前缀字母在基本首字母大写时仍为小写,因此,例如 text-transform: uppercase 会将 ar aon tslí 变为 AR AON tSLÍ,而不是像人们所期望的那样,变为 AR AON TSLÍ(仅在 Firefox)。在某些情况下,大写字母也会被删除:an t-uisce 转换为 AN tUISCE(并且连字符被 text-transform: lowercase 正确地重新插入)。

语言由 HTML lang 属性或 XML xml:lang 属性定义。

备注: 特定情况的支持因浏览器而异,因此请检查浏览器兼容性表格

语法

css
/* 关键字值 */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/* 全局值 */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;
capitalize

这个关键字强制每个单词的字母转换为大写。其他的字符保留不变(它们处于元素的文本保留原始大小写)。字母是 Unicode 字符集或者数字里定义的字符 实验性 ;因此单词开头的任何标点符号或者特殊符号将会被忽略。

备注: 作者不应期望 capitalize 遵循特定语言的标题大小写惯例(如跳过英文的文章)。

备注: 在 CSS 1 和 CSS 2.1 中,capitalize 关键字没有得到充分说明。这导致不同的浏览器在计算第一个字母的方式上存在差异(Firefox 认为 -_ 是字母,但其他浏览器不这样认为。Webkit 和 Gecko 都错误地认为基于字母的符号如 是真正的字母)。通过精确定义正确的行为,CSS Text Level 3 清除了这种混乱。浏览器兼容性表中的 capitalize 一行包含了不同引擎开始支持这一精确定义的行为的版本。

uppercase

这个关键字强制所有字符被转换为大写。

lowercase

这个关键字强制所有字符被转换为小写。

none

这个关键字阻止所有字符的大小写被转换。

full-width

是一个关键字,它强制将字符(主要是表意文字和拉丁文字))--写在一个正方形内,使它们能够在通常的东亚文字(如中文或日文)中对齐。

full-size-kana

通常用于 <ruby> 注释文本,该关键字将所有小假名字符转换为等效的全尺寸假名,以补偿在 ruby 中通常使用的小字体的可读性问题。

math-auto

用于在合适的时候自动使用数学斜体渲染文本。仅当在只有一个字符的文本节点上使用的时候,它将把拉丁字母、希腊字母和其他一些数学相关的符号转换为数学斜体符号。举例来说,“x”将会转换为“𝑥”(U+1D465),但“exp”将会保持是“exp”。这个特性主要用来指定使用 MathML 语言的 <mi> 元素的行为。通常你应当使用 MathML 标记,它会自动应用正确的样式。

无障碍考虑

大段将文字 text-transform 值设置为 uppercase,对于有认知障碍的人(比如阅读障碍)来说可能难以阅读。

形式定义

初始值none
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型离散值

形式语法

text-transform = 
none |
[ capitalize | uppercase | lowercase ] || full-width || full-size-kana

示例

使用“none”

html
<p>
  原始文字
  <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>
css
span {
  text-transform: none;
}
strong {
  float: right;
}

这个示例展示了没有文字转换的情况。

使用“capitalize”(一般情况)

html
<p>
  原始文字
  <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>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

这个示例展示了首字母大写的情况。

使用“capitalize”(标点)

html
<p>
  原始文字
  <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;
}

这个示例展示了一个词的初始标点是如何被忽略的。关键字的目标是第一个字母,也就是字母或数字总类中的第一个 Unicode 字符部分。

使用“capitalize”(符号)

html
<p>
  原始文字
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

这个示例展示了初始符号是如何被忽略的。关键字的目标是第一个字母,也就是字母或数字总类中的第一个 Unicode 字符部分。

使用“capitalize”(荷兰语 ij 双字母字符)

html
<p>
  原始文字
  <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>

这个示例展示了荷兰语双字母字符 ij 必须像一个单一的字母一样处理。

使用“uppercase”(一般情况)

html
<p>
  原始文字
  <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>
css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}

这个示例展示了如何将文本转换为大写字母。

使用“uppercase”(希腊语元音)

html
<p>
  原始文字
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
  >
</p>
css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}

这个示例展示了希腊元音除了不连读的 eta 之外,应该没有重音,而元音对中第一个元音的重音变成了第二个元音的重音。

使用“lowercase”(一般情况)

html
<p>
  原始文字
  <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>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

这个示例展示了如何将文本转换为小写字母。

使用“lowercase”(希腊语 Σ)

html
<p>
  原始文字
  <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>

这个示例展示了希腊字母西格玛(Σ)是如何根据上下文转化为普通小写西格玛(σ)或词尾变体(ς)的。

使用“lowercase”(立陶宛语)

html
<p>
  原始文字
  <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>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

这个示例展示了立陶宛语字母 Ĩ 在转换为小写时保持上方的小点。

使用“full-width”(一般情况)

html
<p>
  原始文字
  <strong
    >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
  >
</p>
<p>
  text-transform: full-width
  <strong
    ><span
      >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
    ></strong
  >
</p>
css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

有些字符有两种格式:正常宽度和全宽度,它们具有不同的 Unicode 编码点。全宽版本可以用来将它们与亚洲的表意文字顺利混合。

使用“full-width”(日语半角片假名)

html
<p>
  原始文字
  <strong>ウェブプログラミングの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ウェブプログラミングの勉強</span></strong>
</p>
css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

日语的半宽片假名被用来在 8 位字符编码中表示片假名。与普通的(全宽)片假名字符不同,一个带有 dakuten(声母标记)的字母被表示为两个码点,即字母的主体和 dakuten。在将这些字符转换为全宽时,full-width 将它们合并为一个代码点。

使用“full-size-kana”

html
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
</p>
css
p:nth-of-type(2) {
  text-transform: full-size-kana;
}

规范

Specification
CSS Text Module Level 4
# text-transform

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-transform
capitalize
Dutch IJ digraph
full-size-kana
full-width
Greek accented letters
lowercase
Σσ or word-final ς
math-auto
none
iİ and ıI
uppercase
ßSS

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

参见