文本

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

文本对齐

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

笑江湖浪迹十年游，空负少年头。对铜驼巷陌，吟情渺渺，心事悠悠！酒冷诗残梦断，南国正清秋。把剑凄然望，无处招归舟。明日天涯路远，问谁留楚佩，弄影中洲？数英雄儿女，俯仰古今愁。难消受灯昏罗帐，怅昙花一现恨难休！飘零惯，金戈铁马，拼葬荒丘！

<p class="text-justify">笑江湖浪迹十年游，空负少年头。对铜驼巷陌，吟情渺渺，心事悠悠！酒冷诗残梦断，南国正清秋。把剑凄然望，无处招归舟。明日天涯路远，问谁留楚佩，弄影中洲？数英雄儿女，俯仰古今愁。难消受灯昏罗帐，怅昙花一现恨难休！飘零惯，金戈铁马，拼葬荒丘！</p>

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

楔子 一阕词来 南国清秋魂梦绕 十年人散 绣房红烛剑光寒（左对齐）

第01章 一女独寻仇 十六年间经几劫 群雄齐出手 五台山上震三军（中间对齐）

第02章 浪迹江湖 水尽萍枯风不语 隐身古刹 空灵幻灭色难留（右对齐）

第03章 剑气珠光 不觉坐行皆梦梦 琴声笛韵 无端啼哭尽非非（SM或更宽时右对齐）

第04章 比剑压凶人 同门决战 展图寻缉梦 旧侣重来（MD或更宽时右对齐）

第05章 难受温柔 岂为新知忘旧好 惊心恶斗 喜从方窟得真经（LG或更宽时右对齐）

第06章 雾气弥漫 荒村来异士 湖光澈湘 幽谷出征骑（XL或更宽时右对齐）

<p class="text-left">楔子 一阕词来 南国清秋魂梦绕 十年人散 绣房红烛剑光寒（左对齐）</p>
<p class="text-center">第01章 一女独寻仇 十六年间经几劫 群雄齐出手 五台山上震三军（中间对齐）</p>
<p class="text-right">第02章 浪迹江湖 水尽萍枯风不语 隐身古刹 空灵幻灭色难留（右对齐）</p>

<p class="text-sm-right">第03章 剑气珠光 不觉坐行皆梦梦 琴声笛韵 无端啼哭尽非非（SM或更宽时右对齐）</p>
<p class="text-md-right">第04章 比剑压凶人 同门决战 展图寻缉梦 旧侣重来（MD或更宽时右对齐）</p>
<p class="text-lg-right">第05章 难受温柔 岂为新知忘旧好 惊心恶斗 喜从方窟得真经（LG或更宽时右对齐）</p>
<p class="text-xl-right">第06章 雾气弥漫 荒村来异士 湖光澈湘 幽谷出征骑（XL或更宽时右对齐）</p>
文本包裹和溢出（换行）处理

使用 .text-wrap 类换行文本。

剑胆琴心 似喜似嗔同命鸟 
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  剑胆琴心 似喜似嗔同命鸟
</div>

.text-nowrap 样式类可以防止文本换行。

雪泥鸿爪 亦真亦幻异乡人 
<div class="text-nowrap" style="width: 8rem;background-color: rgba(0, 0, 255, .1)">
  雪泥鸿爪 亦真亦幻异乡人
</div>

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

第08章 恩怨难明 空山惊恶斗 灵根未断 一语酸迷茫
第09章 扑朔迷离 耐心详怪梦 寻幽探秘 无意会高人 
<div class="row">
  <div class="col-2 text-truncate">
    第08章 恩怨难明 空山惊恶斗 灵根未断 一语酸迷茫
  </div>
</div>

<span class="d-inline-block text-truncate" style="max-width: 150px;">
  第09章 扑朔迷离 耐心详怪梦 寻幽探秘 无意会高人
</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.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

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

This is in 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>