Tailwind CSS - 文字转换

Tailwind CSS **文字转换** 是一个预定义类集合，它简化了更改HTML元素内文本大小写或案例的过程。

Tailwind CSS 文字转换类

下面列出了Tailwind CSS 文字转换类及其修改文本外观的属性。

类名	CSS 属性
uppercase	text-transform: uppercase;
lowercase	text-transform: lowercase;
capitalize	text-transform: capitalize;
normal-case	text-transform: none;

Tailwind CSS 文字转换类的功能

**uppercase:** 此类将文本转换为全部大写字母。
**lowercase:** 此类将文本转换为全部小写字母。
**capitalize:** 此类将文本中每个单词的首字母大写。
**normal-case:** 此类使文本以其默认样式显示，小写字母和正确大写首字母。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

设置文本转换

以下是Tailwind CSS 文字转换类的示例，展示了如何在各种上下文中使用这些转换。

使用Tailwind CSS 应用文本转换

此示例展示了如何使用Tailwind CSS 文字转换类将不同的文本转换样式应用于HTML元素。

示例

Open Compiler

 
<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl font-bold mb-6">
        Tailwind CSS  Text Transform
    </h1> 
    <p class="underline">uppercase</p>
    <p class="uppercase text-lg mb-4">
        This text is transformed to uppercase.
    </p>
    <p class="underline">lowercase</p>
    <p class="lowercase text-lg mb-4">
        THIS TEXT IS TRANSFORMED TO LOWERCASE.
    </p>
    <p class="underline">capitalized</p>
    <p class="capitalize text-lg mb-4">
        this text will be capitalized.
    </p>
    <p class="underline">normal text</p>
    <p class="normal-case text-lg mb-4">
        tHis TExT will reVert tO its dEfault capItalIzatIon.
    </p>
</body>

</html>

悬停时的条件文本转换

此示例展示了如何使用Tailwind CSS 文字转换实用程序类根据悬停状态有条件地应用文本转换样式。例如，“**hover:uppercase**”在悬停时将文本转换为大写。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
         Tailwind CSS  Text Transform
    </h2>
    <h2 class="font-bold text-lg">
        Hover Over The Text to See Transformations.
    </h2>
    <p class="lowercase text-lg hover:uppercase mb-4">
        Hover to see it transform to uppercase.
    </p>
    <p class="uppercase text-lg hover:lowercase mb-4">
        Hover to see it transform to lowercase.
    </p>
    <p class="lowercase text-lg hover:capitalize mb-4">
       hover to see it transform to Capitalize.
    </p>
     <p class="normal-case text-lg hover:uppercase mb-4">
        Text remains in normal case, 
        but transforms to uppercase on hover.
    </p>
</body>

</html>

打印页面