文本处理案例

文本处理

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

文本对齐

使用文本对齐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.

Copy

<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-wrap类换行文本.

This text should wrap.

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

  This text should wrap.</div>

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

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>

换行

通过使用.text-break来设置overflow-wrap: break-word (和word-break: break-word 用于IE和Edge兼容性的break-word)防止长串文本破坏组件的布局.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

字母大小写转换

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

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>

重置颜色

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

Muted text with a reset link.

<p class="text-muted">

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

文字装饰

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

Non-underlined link

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