text-transform

**text-transform** CSS 属性指定如何将元素的文本大写。它可以用来使文本以全大写或全小写显示，或者每个单词首字母大写。它还有助于提高 ruby 的可读性。

尝试一下

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;

/* 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 文本级别 3 清除了这种混乱。浏览器兼容性表中的 capitalize 行包含了不同引擎开始支持这种现在定义明确的行为的版本。

uppercase

是一个关键字，它将所有字符转换为大写。

lowercase

是一个关键字，它将所有字符转换为小写。

none

是一个关键字，它阻止所有字符的 case 被更改。

full-width

是一个关键字，它强制将字符（主要是汉字和拉丁字母）写入一个方框内，使其能够与常见的东亚文字（如中文或日文）对齐。

full-size-kana

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

无障碍性

使用 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>
</p>
css
p:nth-of-type(2) {
  text-transform: full-size-kana;
}

规范

规范
CSS 文本模块级别 3
# text-transform

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅