文字

控制對齊、換行、粗細等功能的常見文字實用工具的說明文件和範例。

在此頁面

文字對齊

使用文字對齊類別輕鬆重新對齊元件的文字。對於開始、結束和置中對齊，提供與網格系統使用相同視窗寬度中斷點的回應式類別。

在所有視窗大小上開始對齊文字。

在所有視窗大小上置中對齊文字。

在所有視窗大小上結束對齊文字。

在大小為 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 以避免彈性容器的問題。

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