文本

用於控制對齊、換行、粗細等的常用文本實用程序的文檔和示例。

在本頁面

文本對齊

使用文本對齊類輕鬆將文本重新對齊到組件。對於開始、結束和中心對齊，可以使用與網格系統使用相同視口寬度斷點的響應類。

在所有視口尺寸上開始對齊文本。

在所有視口大小上居中對齊文本。

在所有視口大小上結束對齊的文本。

在尺寸為 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
    ),