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:** 此類使文字以其預設樣式顯示，小寫字母和正確大寫首字母。

設定文字轉換

以下是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>

列印頁面