在GitHub上查看

文本

用于控制对齐、换行、加粗等的通用文本实用工具的文档和示例。

本页导航↓

文本对齐

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

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 来防止长字符串的文本破坏组件的布局。为了获得更广泛的浏览器支持，我们使用自动换行来代替更常见的 overflow-wrap ，并添加了弃用的 word-break: break-word 来避免flex容器的问题。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

注意，在最常用的RTL语言——在Arabic中，文字分割是不可能的。因此， .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 只更改每个单词的第一个字母，而不影响其他任何字母的大小写。

快速改变字体大小的文本。虽然我们的标题类(例如，.h1–.h6)应用的是 font-size， font-weight，和 line-height，但这些实用工具只应用字体大小。这些实用工具的大小与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 映射来定制您可用的 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将所选内容更改为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>