文本转换 | text-transform (Miscellaneous Level 1) - CSS 中文开发手册 - Break易站

文本转换 | text-transform (Miscellaneous Level 1) - CSS 中文开发手册

该text-transformCSS属性指定如何利用元素的文本。它可以用来使文本全部大写或全部小写，或每个单词大写。

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

该text-transform属性考虑到特定于语言的大小写映射规则，如：

在土耳其语中，土耳其语（tr），阿塞拜疆语（az），克里米亚鞑靼语（crh），伏尔加塔塔尔语tt和巴什基尔语等突厥语言中，ba有两种类型，有和没有点，以及两种情况配对：i/ ?和?/ I。在德国（de），则?变成SS大写。在荷兰语（nl）中，双ij字母变成IJ，即使是text-transform: capitalize，也只是把大写字母的第一个字母。在希腊语（el）中，当整个单词大写（?/ Α）时，元音会失去重音，除了析取的eta（?/ ?）。另外，对第一个元音有重音的双元音会失去重音，并在第二个元音（?ι/ Α?）上获得分音。在希腊语（el）中，小写的西格玛字符有两种形式：σ和?。?只有在西格玛终止一个字时才使用。在应用text-transform: lowercase大写sigma（Σ）时，浏览器需要根据上下文选择正确的小写形式。在爱尔兰语（ga）中，当基本初始字母大写时，某些前缀字母保持小写，所以例如text-transform: uppercase将会改变ar aon tslí为AR AON tSLí和不是，如所期望的那样AR AON TSLí（仅限于Firefox）。在某些情况下，连字符在大写时也被删除：an t-uisce转换为AN tUISCE（连字符被正确地重新插入text-transform: lowercase）

语言由langHTML属性或xml:langXML属性

对于这些特定情况的支持因浏览器而异，因此请检查浏览器兼容性表。

语法

capitalize

是一个关键字 强制每个单词的第一个字母转换为大写。其他字符不变; 也就是说，他们保留原文写在元素的文本中。字母是“字母”或“数字”常规类别的任何Unicode字符部分：它不包括单词开始处的任何标点符号或符号。

作者不应期望capitalize遵循语言特定的标题约定（例如跳过英文文章）。

uppercase是关键字 强制所有字符被转换为大写。lowercase是一个关键字强制所有字符转换为小写。

none是一个关键字，防止所有字符的情况下被改变。

full-width是一个关键字强制在一个正方形内写入一个字符，主要是表意文字和拉丁脚本，使它们能够在通常的东亚脚本（如中文或日文）中对齐。

形式语法

none | capitalize | uppercase | lowercase | full-width

实例

none

Initial String
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

text-transform: none
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

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

这说明没有文本转换。

capitalize （通常情况）

Initial String
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

text-transform: capitalize
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

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

这说明了文本大写化。

capitalize （标点）

Initial String
  (this) “is” [a] –short– -test- ?for? *the* _css_ ?capitalize? ??transform!

text-transform: capitalize
  (this) “is” [a] –short– -test- ?for? *the* _css_ ?capitalize? ??transform!

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

这说明如何忽略一个单词的初始标点符号。关键字定位第一个字母，即Letter或Number常规类别的第一个Unicode字符部分。

capitalize （符号）

Initial String
  ??? (???) —???— ?kl

text-transform: capitalize
  ??? (???) —???— ?kl

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

这演示了初始符号如何被忽略。关键字定位第一个字母，即Letter或Number常规类别的第一个Unicode字符部分。

capitalize（Dutch ij digraph）

Initial String
  The Dutch word: "ijsland" starts with a digraph.

text-transform: capitalize
  The Dutch word: "ijsland" starts with a digraph.

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

这表明 Dutch ij digraph必须像单个字母一样处理。

uppercase （一般）

Initial String
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

text-transform: uppercase
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

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

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

uppercase （希腊元音）

Initial String
  Θα π?με στο "Θε?κ? φα?" ? στη "Νερ?ιδα"

text-transform: uppercase
  Θα π?με στο "Θε?κ? φα?" ? στη "Νερ?ιδα"

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

这说明了希腊元音除了析取之外是如何的。埃塔应该没有重音，元音对的第一个元音上的重音在第二个元音上变成了一个双关音。

lowercase （一般）

Initial String
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

text-transform: lowercase
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

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

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

lowercase （希腊语Σ）

Initial String
  Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.

text-transform: lowercase
  Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.

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

这说明希腊字符sigma（Σ）如何根据上下文转换为常规小写sigma（σ）或单词final变体（?）。

full-width （一般）

Initial String
  0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;?@{|}~

text-transform: full-width
  0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;?@{|}~

span {
  text-transform: full-width;
}
strong { width: 100%; float: right; }

一些字符以两种格式存在，即正常宽度和全宽度，具有不同的Unicode代码点。全角版本是用来与亚洲的表意文字顺利混合。

规范

浏览器兼容性