Tailwind CSS - 文字裝飾樣式

Tailwind CSS **文字裝飾**樣式是一個實用程式類，它提供了簡單的方法來新增或刪除網頁上文字元素的文字裝飾樣式。

Tailwind CSS 文字裝飾樣式類

下面列出了 Tailwind CSS 文字裝飾樣式類，以及啟用各種文字裝飾樣式的屬性。

類	CSS 屬性
decoration-solid	text-decoration-style: solid;
decoration-double	text-decoration-style: double;
decoration-dotted	text-decoration-style: dotted;
decoration-dashed	text-decoration-style: dashed;
decoration-wavy	text-decoration-style: wavy;

Tailwind CSS 文字裝飾樣式類的功能

**decoration-solid:** 此類在文字下方應用實線。
**decoration-double:** 此類對文字應用雙線下劃線。
**decoration-dotted:** 此類用一系列點裝飾文字。
**decoration-dashed:** 此類在文字下方應用虛線。
**decoration-wavy:** 此類對文字應用波浪形下劃線。

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 Decoration Style
    </h1> 
   
    <p class="underline decoration-solid mb-4 text-lg">
         Text with solid line underneath.
    </p>
    
    <p class="underline decoration-double  mb-4 text-lg">
        Text with double underline.
    </p>
    
    <p class="underline decoration-dotted mb-4 text-lg">
        Text with dotted underline.
    </p>
    
    <p class="underline decoration-dashed mb-4 text-lg">
        Text with dashed underline.
    </p>
    
    <p class="underline decoration-wavy text-lg">
        Text with wavy underline.
    </p> 
</body>

</html>

懸停時的條件文字裝飾樣式

此示例顯示了使用修飾符有條件地應用 Tailwind CSS 文字裝飾樣式類以控制不同狀態。例如，'hover:underline' 在懸停時對文字應用下劃線。

示例

<!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 hover:no-underline">
        Tailwind CSS  Text Decoration Style
    </h1> 
    <h2 class="text-2xl mb-4">Hover to toggle line</h2>
    <p class="underline decoration-solid 
              mb-4 text-lg hover:no-underline">
         Text with solid line underneath.
    </p>    
    <p class="underline decoration-double  
              mb-4 text-lg hover:no-underline">
        Text with double underline.
    </p>    
    <p class="underline decoration-dotted 
              mb-4 text-lg hover:no-underline">
        Text with dotted underline.
    </p>
    <p class="underline decoration-dashed  
              mb-4 text-lg hover:no-underline">
        Text with dashed underline.
    </p>    
    <p class="underline decoration-wavy-on-hover 
              text-lg hover:no-underline">
        Text with wavy underline.
    </p> 
</body>

</html>

列印頁面