文本

用于控制对齐、换行、粗细等的常用文本实用程序的文档和示例。

文本对齐

使用文本对齐类轻松将文本重新对齐到组件。

Ambitioni dedisse scripsisse iudicaretur。Cras mattis iudicium purus 坐在 amet 发酵中。Donec sed odio Operae，eu vulputate felis rhoncus。Praeterea iter est quasdam res quas ex Commun。在 nos hinc posthac，sitientis piros Afros。Petierunt uti sibi concilium totius Galliae in diem certam indicere。Cras mattis iudicium purus 坐在 amet 发酵中。

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</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。

Praeterea iter est quasdam res quas ex Commun。

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

文本变换

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

小写文本。

大写文本。

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