文本 · Bootstrap v5.3

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

文本环绕和溢出

使用 .text-wrap 类自动换行。

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

防止文本使用 .text-nowrap 类换行。

This text should overflow the parent.

<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
  This text should overflow the parent.
</div>

通过使用 .text-break 设置 word-wrap: break-word 和 word-break: break-word ，防止长文本字符串破坏组件布局。我们使用“自动换行”而不是更常见的 overflow-wrap 来获得更广泛的浏览器支持，并添加了已弃用的 word-break: break-word 以避免 flex 容器出现问题。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

请注意，在阿拉伯语中不可能使用断字，这是最常用的RTL语言。因此，


   .text-break

从我们的 RTL 编译的 CSS 中删除。

使用文本大写类转换组件中的文本。

Lowercased text.

Uppercased text.

CapiTaliZed text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

请注意， .text-capitalize 仅更改每个单词的首字母，而不影响任何其他字母的大小写。

快速更改文本的 font-size 。虽然我们的标题类（例如， .h1 – .h6 ）应用 font-size ， font-weight 和 line-height ，但这些实用程序_仅_应用 font-size 。这些实用程序的大小与 HTML 的标题元素相匹配，因此随着数量的增加，它们的大小会减小。

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

通过修改 $font-sizes Sass 映射来自定义可用的 font-size 。

字体粗细和斜体

使用这些实用程序快速更改文本的 font-weight 或 font-style 。 font-style 实用程序缩写为 .fst-* ， font-weight 实用程序缩写为 .fw-* 。

Bold text.

Bolder weight text (relative to the parent element).

Semibold weight text.

Medium weight text.

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

使用 .lh-* 实用程序更改行高。

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

将选择更改为我们的等宽字体堆栈，并带有 .font-monospace 。

This is in monospace

<p class="text-body-secondary">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
使用文本修饰类修饰组件中的文本。
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>


   
    Sass 变量
    
    
   
   
    
     默认类型和字体相关的 Sass 变量：
    
   
   
    scss/_variables.scss
   
   
    // stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;
$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-medium:          500;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;
$font-weight-base:            $font-weight-normal;
$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;
$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;
Sass 映射 

字体大小实用程序是从此地图生成的，并与我们的实用程序 API 结合使用。
      scss/_variables.scss
    
   
   
    $theme-colors-text: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis,
Utilities API 

字体和文本实用程序在我们的实用程序 API 中的scss/_utilities.scss中声明。了解如何使用实用程序 API。
      scss/_utilities.scss
  property: font-family,
  class: font,
  values: (monospace: var(--#{$prefix}font-monospace))
"font-size": (
  rfs: true,
  property: font-size,
  class: fs,
  values: $font-sizes
"font-style": (
  property: font-style,
  class: fst,
  values: italic normal
"font-weight": (
  property: font-weight,
  class: fw,
  values: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    normal: $font-weight-normal,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    bold: $font-weight-bold,
    bolder: $font-weight-bolder
"line-height": (
  property: line-height,
  class: lh,
  values: (
    1: 1,
    sm: $line-height-sm,
    base: $line-height-base,
    lg: $line-height-lg,
"text-align": (
  responsive: true,
  property: text-align,
  class: text,
  values: (
    start: left,
    end: right,
    center: center,
"text-decoration": (
  property: text-decoration,
  values: none underline line-through
"text-transform": (
  property: text-transform,
  class: text,
  values: lowercase uppercase capitalize
"white-space": (
  property: white-space,
  class: text,
  values: (
    wrap: normal,
    nowrap: nowrap,
"word-wrap": (
  property: word-wrap word-break,
  class: text,
  values: (break: break-word),
  rtl: false