文本

用于控制对齐、换行、粗细等内容的常见文本实用工具的文档和示例。

文本对齐

使用文本对齐类轻松重新对齐文本以匹配组件。

一些占位文本用于演示两端对齐文本。您能为我做同样的事情吗？是时候面对现实，我已不再是你的缪斯。听说它很美，由你评判，我的女孩们会投票。我能感受到我内心有一只凤凰。天堂嫉妒我们的爱情，天使们在天上哭泣。是的，你带我去了乌托邦。

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

对于左对齐、右对齐和居中对齐，可以使用响应式类，这些类使用与网格系统相同的视口宽度断点。

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

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

所有视口大小上的右对齐文本。

在 SM（小）或更宽的视口上左对齐文本。

在 MD（中）或更宽的视口上左对齐文本。

在 LG（大）或更宽的视口上左对齐文本。

在 XL（超大）或更宽的视口上左对齐文本。

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

文本换行和溢出

用 .text-wrap 类包装文本。

此文本应包装。

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

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

此文本应溢出父级。

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

对于较长的内容，您可以添加 .text-truncate 类以用省略号截断文本。需要 display: inline-block 或 display: block。

此外，有些事情是大家共同的。

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

单词换行

使用 .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>

文本转换

使用文本大写类在组件中转换文本。

小写文本。

大写文本。

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

请注意，.text-capitalize 仅更改每个单词的第一个字母，而不会影响任何其他字母的大小写。

字体粗细和斜体

快速更改文本的粗细（粗体）或将文本设置为斜体。

粗体文本。

更粗的重量文本（相对于父元素）。

正常重量文本。

轻量级文本。

更轻的重量文本（相对于父元素）。

斜体文本。

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

等宽字体

使用 .text-monospace 将选择更改为我们的等宽字体堆栈。

这是等宽的

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

重置颜色

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

带重置链接的静音文本。

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

文本修饰

使用 .text-decoration-none 类删除文本修饰。

无下划线的链接

<a href="#" class="text-decoration-none">Non-underlined link</a>