文本

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

文本对齐

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

一些占位符文本来演示对齐的文本对齐方式。你会为我做同样的事吗？是时候面对音乐了，我不再是你的缪斯。听说它很漂亮，当评委，我的女孩们会投票。我能感觉到我体内有一只凤凰。天堂嫉妒我们的爱，天使从天而降。是的，你带我去乌托邦。

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

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>

断字

.text-break使用to setword-wrap: break-word和防止长字符串破坏组件的布局word-break: break-word。我们使用word-wrap而不是更常见overflow-wrap的更广泛的浏览器支持，并添加不推荐使用word-break: break-word以避免弹性容器问题。

嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯

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