笙亿网络策划

Tailwind CSS 文本转换怎么用？text-transform 实用技巧

约 6 分钟读完 40 阅
文章导读
Previous Quiz Next Tailwind CSS Text Transform 是一组预定义的 class，用于简化在 HTML 元素中更改文本大小写或转换形式的过程。
📋 目录
  1. Ⅰ Tailwind CSS 文本转换类
  2. Ⅱ Tailwind CSS 文本转换类的功能
  3. Ⅲ 设置文本转换
  4. Ⅳ 使用 Tailwind CSS 应用文本转换
  5. Ⅴ 悬停时的条件文本转换
A A

Tailwind CSS - 文本转换

Previous
Quiz
Next

Tailwind CSS Text Transform 是一组预定义的 class，用于简化在 HTML 元素中更改文本大小写或转换形式的过程。

Tailwind CSS 文本转换类

以下是 Tailwind CSS 文本转换类的列表，这些类通过转换文本样式来修改文本外观。

Class CSS Properties
uppercase text-transform: uppercase;
lowercase text-transform: lowercase;
capitalize text-transform: capitalize;
normal-case text-transform: none;

Tailwind CSS 文本转换类的功能

  • uppercase: 该 class 将文本转换为全大写字母。
  • lowercase: 该 class 将文本转换为全小写字母。
  • capitalize: 该 class 将文本中每个单词的首字母大写。
  • normal-case: 该 class 使文本显示为默认样式，小写字母并正确大写首字母。

设置文本转换

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

使用 Tailwind CSS 应用文本转换

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

示例

 
<!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' 在悬停时将文本转换为大写。

示例

<!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>