文本

用于控制对齐、换行、粗细等内容的常见文本实用程序的文档和示例。

在此页面上

文本对齐

使用文本对齐类轻松地将文本重新对齐到组件。对于开始、结束和居中对齐，可以使用响应式类，这些类使用与网格系统相同的视口宽度断点。

在所有视口大小上开始对齐文本。

在所有视口大小上居中对齐文本。

在所有视口大小上结束对齐文本。

在大小为 SM（小）或更大的视口上结束对齐文本。

在大小为 MD（中）或更大的视口上结束对齐文本。

在大小为 LG（大）或更大的视口上结束对齐文本。

在大小为 XL（超大）或更大的视口上结束对齐文本。

在大小为 XXL（超超大）或更大的视口上结束对齐文本。

html

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>

请注意，我们不提供用于两端对齐文本的实用程序类。虽然从美学上看，两端对齐的文本可能看起来更具吸引力，但它确实会使单词间距更加随机，因此更难阅读。

文本换行和溢出

使用 .text-wrap 类换行文本。

此文本应换行。

html

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

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

此文本应溢出父级。

html

<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 来防止长文本字符串破坏组件的布局。我们使用 word-wrap 而不是更常见的 overflow-wrap 来获得更广泛的浏览器支持，并添加已弃用的 word-break: break-word 以避免与 flex 容器出现问题。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

请注意，在阿拉伯语中无法断词，这是使用最广泛的 RTL 语言。因此，从我们的 RTL 编译 CSS 中删除了 .text-break。

文本转换

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

小写文本。

大写文本。

首字母大写文本。

html

<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 文本

.fs-2 文本

.fs-3 文本

.fs-4 文本

.fs-5 文本

.fs-6 文本

html

<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-*。

粗体文本。

更粗的粗细文本（相对于父元素）。

半粗体文本。

中等粗细文本。

正常粗细文本。

细体文本。

更细的粗细文本（相对于父元素）。

斜体文本。

正常字体样式文本

html

<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-* 实用程序更改行高。

这是一个长段落，旨在展示我们的实用程序如何影响元素的行高。类应用于元素本身或有时应用于父元素。这些类可以使用我们的实用程序 API 根据需要进行自定义。

html

<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 将选定内容更改为我们的等宽字体堆栈。

这是等宽字体

html

<p class="font-monospace">This is in monospace</p>

重置颜色

使用 .text-reset 重置文本或链接的颜色，使其继承其父元素的颜色。

辅助正文文本，带有重置链接。

html

<p class="text-body-secondary">
  Secondary body text with a <a href="#" class="text-reset">reset link</a>.
</p>

文本修饰

使用文本修饰类修饰组件中的文本。

此文本下方有一条线。

此文本有一条线穿过。

此链接已删除其文本修饰

html

<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>

CSS

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

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

scss/_maps.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,
);

Sass 实用程序 API

字体和文本实用程序在 scss/_utilities.scss 中的实用程序 API 中声明。了解如何使用实用程序 API。

scss/_utilities.scss

"font-family": (
  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
),