引导带 |文本实用程序（对齐、换行、粗细等）

Bootstrap是最流行的开源前端框架之一，它帮助我们开发响应式、移动优先的网站和 Web 应用程序。作为其产品的一部分，bootstrap 为我们提供了一个类集合，称为Text Utilities类，它控制各种文本属性，例如文本对齐、文本换行、文本溢出、文本转换、字体粗细、斜体、等宽、重置文字的颜色，去除文字装饰。

引导断点：

• sm：视口大于 576px。
• md：视口大于 768px。
• lg：视口大于 992px。
• xl：视口大于 1200 像素。

现在让我们看看各种类：

文字对齐：

• text-justify：顾名思义，该类用于将文本对齐设置为对齐状态。
  例子：

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-justify
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：

  

• text-center：它将所有屏幕尺寸的文本对齐设置为居中。

  例子：

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-center
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：

  

• text-left：它将所有屏幕尺寸的文本对齐设置为左对齐。

  例子：

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-left
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• text-right：它将所有屏幕尺寸的文本对齐设置为右对齐。

  例子：

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-right
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• text-(viewport)-(align)： Bootstrap 为我们提供了一系列可以根据视口大小更改文本对齐方式的类。
  • text-sm-left：它在大于 576px(sm) 的视口上将文本对齐设置为左对齐。
  • text-md-left：在大于 768px(md) 的视口中将文本对齐设置为左对齐。
  • text-lg-left：它将文本对齐设置为在大于 992px(lg) 的视口上向左对齐。
  • text-xl-left：它将文本对齐设置为在大小大于 1200px(xl) 的视口上向左对齐。
  • text-sm-center：它将文本对齐设置为在大小大于 576px(sm) 的视口上居中。
  • text-md-center：它将文本对齐设置为在大小大于 768px(md) 的视口上居中。
  • text-lg-center：它将文本对齐设置为在大小大于 992px(lg) 的视口上居中。
  • text-xl-center：它将文本对齐设置为在大小大于 1200px(xl) 的视口上居中。
  • text-sm-right：它在大于 576px(sm) 的视口上将文本对齐设置为右对齐。
  • text-md-right：它在大于 768px(md) 的视口上将文本对齐设置为右对齐。
  • text-lg-right：它在大于 992px(lg) 的视口上将文本对齐设置为右对齐。
  • text-xl-right：它在大于 1200px(xl) 的视口上将文本对齐设置为右对齐。

  示例： text-sm-right

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-sm-right
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

  注意：你可以结合text-(align)和text-(viewport)-(align)以及两个不同的text-(viewport)-(align)，根据不同的viewport获得不同的对齐方式。就像，您可以使用 text-center 和 text-md-right，当视口尺寸大于 768px(md) 时获得正确的文本对齐，在较小的视口中，文本将居中对齐。

文字换行

• text-wrap：它在应用的元素上设置文本换行。

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-wrap
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• text-nowrap：它删除应用元素上的文本换行。

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-nowrap
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• text-truncate：它使用省略号在应用的元素上设置截断。

    
      
      
        p{
          border: 1px dashed black;
        }
    
        h1.text-center{
          color: green;
        }
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-truncate
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

字体粗细和斜体

• font-weight-bold：用于将字体文本设置为粗体。

    
      
      
        p{
          border: 1px dashed black;
        }
    
        h1.text-center{
          color: green;
        }
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        font-weight-bold
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• font-weight-bolder：用于设置比其父元素更粗的字体粗细。

    
      
      
        p{
          border: 1px dashed black;
        }
    
        h1.text-center{
          color: green;
        }
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        font-weight-bolder
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• font-weight-normal：用于设置正常字体粗细。

    
      
      
        p{
          border: 1px dashed black;
        }
    
        h1.text-center{
          color: green;
        }
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        font-weight-normal
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• font-weight-light：用于为文本设置较轻的字体重量。

    
      
      
        p{
          border: 1px dashed black;
        }
    
        h1.text-center{
          color: green;
        }
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        font-weight-light
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• font-weight-lighter：用于设置字体重量比其父元素轻。

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        font-weight-lighter
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

• font-italics：用于设置字体样式为斜体。

    
      
      
        p{
          border: 1px dashed black;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        font-italic
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

等宽：

• text-monospace：用于将文本字体更改为等宽。

    
      
      
        p{
          border: 1px dashed black;
        }
    
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-monospace
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

重置颜色：

• text-reset：用于将文本中的字体颜色移除为从其父元素继承的字体颜色。

    
      
      
        p{
          border: 1px dashed black;
          color: blue;
        }
        h1.text-center{
          color: green;
        }
    
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-reset
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：
  

删除文字装饰：

• text-decoration-none：用于去除文本中的所有文本装饰。

    
      
      
        p{
          border: 1px dashed black;
          text-decoration: line-through;
        }
        h1.text-center{
          color: green;
        }
      
    
      
      
    
      Bootstrap Text Utilities
    
    
      
      
    
        GeeksForGeeks
    
        text-decoration-none
    
        
        
          Prepare for the Recruitment drive of product
          based companies like Microsoft, Amazon, Adobe
          etc with a free online placement preparation
          course. The course focuses on various MCQ's
          & Coding question likely to be asked in the
          interviews & make your upcoming placement
          season efficient and successful.
        
    
      
    
      
      
      
      
      
    

  输出：