文字（Text）

控制對齊、換行、字重等常見文字工具程式的文件和範例。

本頁內容

文字對齊（Text alignment）

使用文字對齊類別輕鬆重新對齊元件中的文字。對於起始、結尾和置中對齊，有可用的響應式類別，使用與格線系統相同的視窗寬度中斷點。

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

End aligned text on viewports sized SM (small) or wider.

End aligned text on viewports sized MD (medium) or wider.

End aligned text on viewports sized LG (large) or wider.

End aligned text on viewports sized XL (extra large) or wider.

End aligned text on viewports sized XXL (extra extra large) or wider.

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 wrapping and overflow）

使用 .text-wrap 類別換行文字。

This text should wrap.

html

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

使用 .text-nowrap 類別防止文字換行。

This text should overflow the parent.

html

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

斷詞（Word break）

使用 .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 語言。因此，.text-break 從我們的 RTL 編譯 CSS 中移除。

文字轉換（Text transform）

使用我們的文字大小寫類別轉換元件中的文字：text-lowercase、text-uppercase 或 text-capitalize。

Lowercased text.

Uppercased text.

CapiTaliZed text.

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）

快速變更文字的 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

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 map 來自訂可用的 font-size。

字重與斜體（Font weight and italics）

使用這些工具程式快速變更文字的 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

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>

行高（Line height）

使用 .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.

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>

等寬字體（Monospace）

使用 .font-monospace 將選取的文字變更為我們的等寬字體堆疊。

This is in monospace

html

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

重設顏色（Reset color）

使用 .text-reset 重設文字或連結的顏色，使其從父元素繼承顏色。

Secondary body text with a reset link.

html

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

文字裝飾（Text decoration）

使用文字裝飾類別裝飾元件中的文字。

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

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

預設字型和字體相關的 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 maps

字體大小工具程式從此 map 產生，結合我們的 utilities 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 utilities API

字體和文字通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities 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
),