文本（Text）

Text的文档和示例，用于控制对齐、包装、重量等。

文本对齐（Text alignment）

用文本对齐类轻松地将文本与组件重新对齐。对于左对齐、右对齐和居中对齐，可使用响应式类，它们使用与网格系统相同的视口宽度断点。

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

用.text-wrap来包裹文本。

<div class="badge 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>

在线运行

单词分割（Word break）

通过使用.text-break来设置word-wrap: break-word和word-break: break-word来防止长字符串破坏你的组件布局。我们使用word-wrap而不是更常见的overflow-wrap以获得更宽度的浏览器支持，并添加已被废弃的word-break: break-word以避免与flex容器的问题。

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

在线运行

文本转换（Text transform）

用文本大写字母类来转换组件中的文本。

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

<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的Sass map来定制你的可用字体大小。

字体重量和斜体（Font weight and italics）

快速改变文本的重量（粗体）或斜体化。

<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-*工具改变行高。

<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 将选择更改为我们的等宽字体堆栈。

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

在线运行

重置颜色（Reset color）

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

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

在线运行

文字装饰（Text decoration）

用文本装饰类来装饰组件中的文本。

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

在线运行