文本

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

在本页面

文本对齐

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

在所有视口尺寸上开始对齐文本。

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

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

在尺寸为 SM（小）或更宽的视口上开始对齐文本。

在尺寸为 MD（中）或更宽的视口上开始对齐文本。

在 LG（大）或更宽的视口上开始对齐文本。

在 XL（特大）或更宽的视口上开始对齐文本。

<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-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

请注意，我们不为对齐文本提供实用程序类。虽然从美学上讲，合理的文本可能看起来更有吸引力，但它确实使字间距更加随机，因此更难阅读。

文本换行和溢出

用.text-wrap类包装文本。

此文本应换行。

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

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

此文本应溢出父级。

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

断字

.text-break使用to setword-wrap: break-word和防止长字符串破坏组件的布局word-break: break-word。我们使用word-wrap而不是更常见overflow-wrap的更广泛的浏览器支持，并添加不推荐使用word-break: break-word以避免弹性容器问题。

嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯

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

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

文本变换

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

小写文本。

大写文本。

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

<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-size通过修改$font-sizesSass 映射自定义您的可用s。

字体粗细和斜体

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

粗体文字。

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

正常重量文本。

轻量级文本。

较轻的文本（相对于父元素）。

斜体文字。

具有正常字体样式的文本

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</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 进行定制。

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

这是在等空间

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

重置颜色

用重置文本或链接的颜色.text-reset，以便它从其父级继承颜色。

带有重置链接的静音文本。

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

文字装饰

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

此文本下方有一行。

这段文字有一条线穿过它。

此链接已删除其文本装饰

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

萨斯

变量

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", 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(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-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-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;

地图

字体大小的实用程序是从这张地图生成的，并结合我们的实用程序 API。

$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
);

实用程序 API

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

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-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: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        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
    ),