文本

通用文本实用程序的文档和示例，用于控制对齐，环绕，粗细等。

在本页面

文本对齐

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

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

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

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

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

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

<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 类包装文本。

This text should wrap.

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

禁止使用.text-nowrap 类包装文本。

This text should overflow the parent.

<div class="text-nowrap bd-highlight" 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

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

请注意，在阿拉伯语中不可能出现断词，阿拉伯语是最常用的RTL语言。因此，.text-break将从我们的RTL编译CSS中删除。

文本转换

在具有文本大小写类的组件中转换文本。

Lowercased text.

Uppercased text.

CapiTaliZed text.

<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 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

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

字体粗细和斜体

使用这些实用程序可以快速更改文本的 font-weight 或 font-style。 font-style 实用程序缩写为 .fst-* ， font-weight 实用程序缩写为 .fw-*.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

<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-* 实用程序更改行高度。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

<p class="lh-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-base">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>

等宽

使用 .font-monospace将所选内容更改为我们的等宽字体堆栈。

This is in monospace

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

重置颜色

使用.text-reset重置文本或链接的颜色，以便它从其父级继承颜色。

Muted text with a reset link.

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

文本装饰

用文本修饰类修饰组件中的文本。

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

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

文本