Bootstrap 5文本字断

文本字断是用来断掉长字符串的。通过使用text-break来防止长的文本字符串破坏你的组件的布局。这个类被废弃了，因为在阿拉伯语中不可能有换行，而最常用的RTL语言是阿拉伯语。

Bootstrap 5文本字断类：

text-break。该类是用来断行的。

语法:

<tag class="Text Word Break">...</tag>

注意：该类已被废弃。

下面的例子说明了Bootstrap 5的文本字断。

例子1：在这个例子中，我们使用了文本字断类。

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <style>
        body{
            margin-left:10px;
            margin-right:10px;
        }
    </style>
</head>
  
<body>
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
    <!-- Bootsrap Text Break classes used -->
    <u>Text Break Used</u>
    <p class="text-break">
        A Computer Science Portal for Geeks, 
        here we learn,teach together. 
        Helping each other is the moto of
        us so we can grow togther.
    </p>
</body>
</html>

输出:

Bootstrap 5文本字断

实例2：在这个例子中，我们将有两个文本，一个将持有text-break类，另一个将是正常的。

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <style>
        body{
            margin-left:10px;
            margin-right:10px;
        }
    </style>
</head>
  
<body>
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
     <u>Text Break Used</u>
    <p class="text-break">
        A Computer Science Portal for Geeks, 
        here we learn,teach together. 
        Helping each other is the moto of
        us so we can grow togther.
    </p>
    <u>Text Break Not Used</u>
    <p>
        A Computer Science Portal for Geeks, 
        here we learn,teach together. 
        Helping each other is the moto of
        us so we can grow togther.
    </p>
</body>
</html>