CSS text-transform 属性-之路教程

语法

text-transform: none | capitalize | uppercase | lowercase | full-width | full-width-kana | initial | inherit;

具有“大写”值的 text-transform 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>Text-transform 属性示例</h2>
    <p>This is some paragraph.</p>
    <div>
      经历过风雨，才懂得阳光的温暖。 把痛苦停在昨天 把微笑留给明天。把痛苦停在昨天 把微笑留给明天。
    </div>
  </body>
</html>

capitalize“大写”值

text-transform 属性的“capitalize”值将单引号或者双引号内的单词以及连字符后的第一个字母大写。
数字后面的第一个字母不会大写。
例如，“2019 年 1 月 3 日”之类的日期不会变成“2019 年 1 月 3 日”。
这个值只大写单词的第一个字母，所以单词中的其他字母不会改变。

在下面的示例中，我们对第一个句子使用了“capitalize”值，对第二个句子使用了“lowercase”值：

具有 "capitalize" 和 "lowercase" 值的 text-transform 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .a {
        text-transform: capitalize
      }
      .b {
        text-transform: lowercase
      }
    </style>
  </head>
  <body>
    <h2>Text-transform 属性示例</h2>
    <div class="a">"Text transform property"</div>
    <br/>
    <div class="b">
      一些段落说明
    </div>
  </body>
</html>

具有 "none" 值的 text-transform 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      h1 {
        color: red;
      }
      h2 {
        text-transform: none;
      }
    </style>
  </head>
  <body>
    <h1>Example with text-transform property</h1>
    <h2>
        具有“none”值的 text-transform 属性示例：
    </h2>
  </body>
</html>

具有“初始”值的 text-transform 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      h1 {
        color: red;
      }
      p.text {
        text-transform: initial;
      }
    </style>
  </head>
  <body>
    <h1>Example with text-transform property</h1>
    <h2>text-transform: initial:</h2>
    <p class="text">
      具有“initial”值的 text-transform 属性示例：
    </p>
  </body>
</html>

CSS text-transform 属性

text-transform 属性用于使文本显示为全大写或者全小写，或者每个单词大写。

此属性考虑了某些特定于语言的大小写映射规则。
让我们来看看其中的一些：

在德语 (de) 语言中，ß 变为大写的 SS。
在希腊语 (el) 语言中，当整个单词为大写字母 (ά/Α) 时，元音重音将丢失，但析取词 eta (ή/Ή) 除外。

浏览器对特定语言情况的支持可能会有所不同。

"full-width" 和 "full-size-kana" 值是实验性的，尚不受任何浏览器支持。

初始值	没有任何
应用于	所有元素。它还适用于伪元素::first-letter 和 ::first-line。
继承	可继承
可动画的	无效
版本	CSS1
DOM 语法	object.Style.TextTransform =“大写”;

CSS text-transform 属性值说明

值	描述
none	没有资本化效果。这是此属性的默认值。
capitalize	使每个单词大写的第一个字符。
uppercase	制作每个单词大写的所有字符。
lowercase	制作每个单词小写的所有字符。
full-width	在广场内写入字符（总文和拉丁脚本），允许它们以中文或者日语对齐。
full-size-kana	将所有小型卡纳字符转换为全尺寸的kana，以补偿通常在Ruby中使用的小字体大小的易读问题。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:49 来源：oir作者：oir

←CSS text-stroke 属性

CSS text-underline-position 属性→

语法