Tailwind CSS - 文本装饰



Tailwind CSS **文本装饰** 包含实用程序类,这些类可以快速轻松地添加和调整 HTML 元素中的文本装饰,而无需自定义 CSS。

Tailwind CSS 文本装饰类

以下是 Tailwind CSS 文本装饰类的列表,其中包括控制文本视觉样式的属性。

CSS 属性
underline text-decoration-line: underline;
overline text-decoration-line: overline;
line-through text-decoration-line: line-through;
no-underline text-decoration-line: none;

Tailwind CSS 文本装饰类的功能

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

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-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**”在悬停时对文本应用下划线。

示例

Open Compiler
<!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>
广告