文本处理

用于控制文本的对齐、组合、字重等示例以及使用文档。

文本对齐

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

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

左对齐、右对齐、居中对齐，可以使用与栅格系统相同的宽度响应式类（即text-sm-*、text-lg-*等方法）来定义。

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

<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-nowrap class样式类可以防止文本换行.

This text should overflow the parent.

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

对于更长的内容，你可以添加一个 .text-truncate class样式，以省略号截断文本（需要结合 display: inline-block 或 display: block来使用）。

Praeterea iter est quasdam res quas ex communi.

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

字母大小写转换

使用文本大小写样式将文字内容由小写，转为大写（不支持中文）。

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仅支持每一个词的第一个字母转为大写，而其它字母不受影响。

字体粗细和斜体效果

快速的实体字体粗细定义、斜体。

Bold text.

Normal weight text.

Light weight text.

Italic text.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

等宽字体

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

这是等宽

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