用于控制对齐、换行、粗细等的常见文本实用程序的文档和示例。
文本对齐
使用文本对齐类轻松地将文本重新对齐到组件。对于开始、结束和居中对齐，可以使用使用与网格系统相同的视口宽度断点的响应式类。
在所有视口大小上开始对齐文本。
在所有视口大小上居中对齐文本。
结束所有视口大小上的对齐文本。
在大小为 SM（小）或更宽的视口上结束对齐的文本。
在大小为 MD（中）或更宽的视口上结束对齐的文本。
在大小为 LG（大）或更宽的视口上结束对齐的文本。
在大小为 XL（超大）或更宽的视口上结束对齐的文本。
在大小为 XXL（超大）或更宽的视口上结束对齐的文本。
<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
<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>防止文本与类换行。.text-nowrap
<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
This text should overflow the parent.
</div>断字符
通过使用 set 和 .我们使用 instead 而不是更常见的来获得更广泛的浏览器支持，并添加已弃用的以避免 flex 容器出现问题。.text-breakword-wrap: break-wordword-break: break-wordword-wrapoverflow-wrapword-break: break-word
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>请注意，在阿拉伯语中无法断字，阿拉伯语是最常用的 RTL 语言。因此，从我们的 RTL 编译的 CSS 中删除。.text-break
文本转换
使用我们的文本大写类转换组件中的文本：、或 。text-lowercasetext-uppercasetext-capitalize
小写文本。
大写文本。
CapiTaliZed 文本。
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>请注意如何仅更改每个单词的第一个字母，而任何其他字母的大小写不受影响。.text-capitalize
字体大小
快速更改文本。虽然我们的标题类（例如 –）适用 、 和 ，但这些实用程序仅适用于 。这些实用程序的大小与 HTML 的标题元素匹配，因此随着数量的增加，它们的大小会减小。font-size.h1.h6font-sizefont-weightline-heightfont-size
.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>通过修改 Sass 地图来自定义您的可用 s。font-size$font-sizes
字体粗细和斜体
使用这些实用程序快速更改文本的 或。 实用程序缩写为 ，实用程序缩写为 。font-weightfont-stylefont-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-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 进行自定义。
<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-body-secondary">
Secondary body 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>CSS系统
Sass 变量
默认类型和字体相关的 Sass 变量：
// 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;
萨斯地图
字体大小实用程序是从此地图中生成的，并结合我们的实用程序 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
);
$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 中声明。了解如何使用实用工具 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
),