1. Web
  2. CSS
  3. text-transform

text-transform

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

text-transform CSS 属性指定了如何大写一个元素的文本。它可以用于将文本转为全大写或全小写，或将每个单词的首字母大写。它还可以帮助提高 ruby 文本的可读性。

试一试

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

text-transform: full-width;

text-transform: full-size-kana;

text-transform: math-auto;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      LONDON. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall.
    </p>
    <p lang="el">
      Σ is a Greek letter and appears in ΟΔΥΣΣΕΥΣ. Θα πάμε στο "Θεϊκό φαΐ" ή στη
      "Νεράιδα"
    </p>
    <p lang="ja">ァィゥェ ォヵㇰヶ</p>
  </div>
</section>

#example-element {
  font-size: 1.2em;
}

text-transform 属性会考虑特定语言的大小写映射规则，例如以下几种：

  • 在土耳其语（tr）、阿塞拜疆语（az）、克里米亚鞑靼语（crh）、伏尔加鞑靼语（tt）和巴什基尔语（ba）等突厥语系语言中，有两种 i，带点和不带点的，并且有两种大小写配对：i/İ 和 ı/I。
  • 在德语（de）中，ß 在大写时变为 SS。
  • 在荷兰语（nl）中，ij 二合字母会变为 IJ，即使使用 text-transform: capitalize（此属性通常只将单词的第一个字母大写）。
  • 在希腊语（el）中，当整个单词大写时，元音会失去重音（ά/Α），但析取 eta（ή/Ή）除外。此外，在第一个元音上带有重音的双元音会失去重音，并在第二个元音上加上分音符（άι/ΑΪ）。
  • 在希腊语（el）中，小写字母 sigma 有两种形式：σ 和 ς。ς 仅在 sigma 作为单词结尾时使用。当对大写 sigma（Σ）应用 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 正确地重新插入）。

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

注意：不同浏览器对特定语言的大小写规则的支持情况有所不同，请查看浏览器兼容性表格。

语法

css
/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;
text-transform: math-auto;

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

是一个关键字，它将每个单词的第一个字母转换为大写。其他字符保持不变（它们保留元素文本中书写的原始大小写）。字母被定义为 Unicode 的“字母”或“数字”通用类别中的字符；因此，单词开头的任何标点符号或符号都会被忽略。

注意：开发者不应期望 capitalize 会遵循特定语言的标题大写约定（例如在英语中跳过冠词）。

注意：capitalize 关键字在 CSS 1 和 CSS 2.1 中的规范不够明确。这导致了不同浏览器在计算首字母的方式上存在差异（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
应用于所有元素。也适用于 ::first-letter 和 ::first-line。
继承性是
计算值同指定值
动画类型离散

正式语法

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

示例

使用 "none" 的示例

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

这演示了没有文本转换。

使用 "capitalize" 的示例（通用）

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

这演示了文本首字母大写。

使用 "capitalize" 的示例（标点符号）

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

这演示了如何忽略单词的初始标点符号。该关键字针对第一个字母，即属于字母或数字通用类别的第一个 Unicode 字符。

使用 "capitalize" 的示例（符号）

html
<p>
  Initial String
  <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>
  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>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

这演示了荷兰语的 ij 二合字母必须像单个字母一样处理。

使用 "uppercase" 的示例（通用）

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

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

使用 "uppercase" 的示例（希腊语元音）

html
<p>
  Initial String
  <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>
  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>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

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

使用 "lowercase" 的示例（希腊语 Σ）

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

这演示了希腊字符 sigma (Σ) 如何根据上下文转换为常规的小写 sigma (σ) 或词末变体 (ς)。

使用 "lowercase" 的示例（立陶宛语）

html
<p>
  Initial String
  <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>
  Initial String
  <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>
  Initial String
  <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 位字符编码中表示片假名。与常规（全角）片假名字符不同，一个带有浊点（浊音符号）的字母由两个码点表示，即字母主体和浊点。full-width 在将这些字符转换为全角时，会将它们组合成一个单一的码点。

使用 "full-size-kana" 的示例

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

使用 "math-auto" 的示例

在这个例子中，我们使用纯 HTML 标记来创建一个数学公式

html
<div>
  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  = 1
</div>

我们给每个 .math-id 元素设置 text-transform: math-auto。但是，请注意只有 x 字符变成了斜体，而 sin 和 cos 保持不变。

css
.math-id {
  text-transform: math-auto;
}

然而，我们鼓励你使用 MathML 来表示数学公式，因为它提供了一种更健壮和更易于访问的方式来表示数学内容。这是使用 MathML 的相同公式

xml
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">sin</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">cos</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
  </semantics>
</math>

规范

规范
CSS 文本模块第 4 级
# text-transform-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.