CSS 文本转换

CSS 的 text-transform 属性用于更改文本的大小写。例如,

p {
    text-transform: capitalize;
}

浏览器输出

CSS Text Transform Description

此处,capitalizetext-transform 属性的一个值,它将每个单词的首字母大写。


CSS 文本转换语法

text-transform 属性的语法是:

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

这里,

  • none - 不改变文本,默认值
  • capitalize - 将每个单词的首字母设置为大写
  • uppercase - 将所有字符设置为大写
  • lowercase - 将所有字符设置为小写
  • initial - 将 text-transform 设置为默认值
  • inherit - 从其父级继承值

CSS text-transform 示例

让我们看一个例子,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS text-transform</title>
    </head>

    <body>
        <h4>text-transform : none</h4>
        <p class="none">The quick brown fox jumps over the lazy dog.</p>
        <h4>text-transform : capitalize</h4>
        <p class="capitalize">The quick brown fox jumps over the lazy dog.</p>
        <h4>text-transform : uppercase</h4>
        <p class="uppercase">The quick brown fox jumps over the lazy dog.</p>
        <h4>text-transform : lowercase</h4>
        <p class="lowercase">The quick brown fox jumps over the lazy dog.</p>
    </body>
</html>
/* doesn't transform the text */
p.none {
    text-transform: none;
}


p.capitalize {
    text-transform: capitalize;
}

/* transforms the text to uppercase */
p.uppercase {
    text-transform: uppercase;
}

/* transforms the text to lowercase */
p.lowercase {
    text-transform: lowercase;
}

浏览器输出

CSS Text Transform Example Description

我们的高级学习平台,凭借十多年的经验和数千条反馈创建。

以前所未有的方式学习和提高您的编程技能。

试用 Programiz PRO
  • 交互式课程
  • 证书
  • AI 帮助
  • 2000+ 挑战