跳到主要内容
在 GitHub 查看原文

文本

用于常见文本工具的文档和示例，以控制对齐、换行、字体粗细等。

本页目录

文本对齐

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

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

在所有视口尺寸上居中文本。

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

在视口尺寸为 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>

请注意，在阿拉伯语中无法断词，而阿拉伯语是使用最广的从右到左的语言。因此 .text-break 已从我们的 RTL 编译 CSS 中移除。

文本转换

使用我们的文本大小写类在组件中转换文本：text-lowercase、text-uppercase或text-capitalize。

小写文本。

大写文本。

大写的文字。

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-size通过修改 $font-sizes Sass 映射。

字体粗细和斜体

使用这些工具快速更改文本的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 进行自定义。

这是一个很长的段落，用于展示我们的工具类如何影响元素的行高。类可以应用于元素本身，有时也应用于父元素。这些类可以根据需要通过我们的工具类 API 进行自定义。

这是一个很长的段落，用于展示我们的工具类如何影响元素的行高。类可以应用于元素本身，有时也应用于父元素。这些类可以根据需要通过我们的工具类 API 进行自定义。

这是一个很长的段落，用于展示我们的工具类如何影响元素的行高。类可以应用于元素本身，有时也应用于父元素。这些类可以根据需要通过我们的工具类 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

字体和文本工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 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
),