How to set the case in HTML text

text-transform property Introduction

text-transformProperty is to set the HTMLpage label inside the text case, text-transformcommon attribute value of the property, there are three: capitalize, , uppercase, lowercaseunusual property values will not be setting them out in this author.

text-transform Property Value Description Table

Property Value	description
none	default. Defined text with lowercase and uppercase letters standards.
capitalize	The first letter of the English alphabet is set to uppercase.
uppercase	The letters to uppercase.
lowercase	The letters to lowercase.
inherit	Provision should inherit the value of the text-transform property from the parent element.

Set to capitalize the first letter capitalized.

Let us enter the text-transformproperty attribute is capitalizepractice, practice content, such as: I will HTMLpage h2the label text to uppercase first letter.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置文本的大小写</title>
    <style>
        h2{
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <h2>success is not defeating others, but changing yourself</h2>
</body>
</html>

Results Figure

uppercase text to uppercase.

Let us enter the text-transformproperty attribute is uppercasepractice, practice content such as: author HTMLpage h2text labels in English lowercase to uppercase setting.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置文本的大小写</title>
    <style>
        h2{
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <h2>success is not defeating others, but changing yourself</h2>
</body>
</html>

Results Figure

lowercase text to uppercase.

Let us enter the text-transformproperty attribute is lowercasepractice, practice content, such as: I will HTMLpage h2the label text uppercase English to lowercase.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置文本的大小写</title>
    <style>
        h2{
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <h2>SUCCESS IS NOT DEFEATING OTHERS, BUT CHANGING YOURSELF</h2>
</body>
</html>

Results Figure

to sum up

text-transformProperties works only for English, do not support the Chinese Oh.

How to set the case in HTML text

text-transform property Introduction

text-transform Property Value Description Table

Set to capitalize the first letter capitalized.

uppercase text to uppercase.

lowercase text to uppercase.

to sum up

Guess you like