Tailwind CSS - Text Decoration

Tailwind CSS Text Decoration由实用类组成，这些类支持快速轻松地在 HTML 元素中添加和调整文本装饰，而无需自定义 CSS。

Tailwind CSS Text Decoration 类

以下是 Tailwind CSS Text Decoration 类列表，其中包含控制文本视觉样式的属性。

Tailwind CSS 文本装饰类的功能

• underline 此类在文本下方添加一条线。
• overline 此类在文本上方添加一条线。
• line-through 此类在文本上绘制一条线。
• no-underline 此类从文本中删除任何下划线装饰。

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-2xl font-bold mb-4">
        Tailwind CSS List Style Position
    </h1> 
    <p> Underline class</p>
    <p class="underline text-2xl mb-4">
        This text uses the underline class.
    </p>
     <p>Overline class</p>
     <p class="overline text-2xl mb-4">
        This text uses the overline class.
    </p>
     <p>Line-through class</p>
    <p class="line-through text-2xl mb-4 ">
        This text uses the line-through class.
    </p>
     <p> No-underline class</p>
    <p class="no-underline text-2xl">
        This text uses the no-underline class.
    </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-2xl font-bold mb-4">
        Tailwind CSS List Style Position
    </h1> 
    <h2 class="text-2xl mb-4">Hover to toggle line</h2>
    <p class="underline mb-6 hover:no-underline">
        Text is underlined by default.
    </p>
        <p class="overline mb-6 hover:no-underline"> 
        Text has an overline by default.
    </p>
    <p class="line-through mb-6 hover:underline">
        Text has a line through it by default.
    </p>
    <p class="no-underline mb-4 hover:underline">
        Text has no underline by default.
    </p>
</body>

</html>