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.

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

示例

使用“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;
}

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

使用“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

浏览器兼容性

BCD tables only load in the browser

参见