Bootstrap 5文本装饰

文本装饰类用于装饰文本组件，如下划线、划线等。这些类可以在很多情况下使用，比如在锚点标签上，有时我们不希望有任何下划线。

文字装饰类：

text-decoration-underline。该类用于在文本上加下划线。
text-decoration-line-through。该类用于在文本上加一条线。
text-decoration-none。该类用于移除文本中的所有装饰。

语法:

<tag class="text-decoration-*">...</tag>

例子1：下面的例子说明了Bootstrap 5中的文本装饰。在这个例子中，我们将在一个文本上使用一个下划线类。

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" crossorigin="anonymous"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>
  
<body>
    <h1 class="text-success text-center">
        Geeksforgeeks</h1>
    <p class="text-center">
        Geeks Learning Together
    </p>
  
    <!-- Bootsrap text-decoration-underline 
        class used -->
    <p class="text-decoration-underline">
        A Computer Science Portal for Geeks
    </p>
</body>
  
</html>

输出:

Bootstrap 5文本装饰

例子2：下面的例子说明了Bootstrap 5中的文本装饰。在这个例子中，我们将使用其余的两个类。

<!DOCTYPE html>
<html>
  
<head>
    <link crossorigin="anonymous" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>
  
<body>
    <h1 class="text-center">
        <a href="www.geeksforgeeks.org" 
            class="text-decoration-none">
            Geeksforgeeks
        </a>
    </h1>
  
    <!-- Bootsrap text-decoration-line-through 
        class used -->
    <p class="text-decoration-line-through text-center">
        A Computer Science Portal for Geeks
    </p>
  
    <p class="text-center">
        Geeks Learning Together
    </p>
</body>
  
</html>

输出:

Bootstrap 5文本装饰