Text
常见文本实用程序的文档和示例,用于控制对齐,换行,粗细等。
文字对齐
使用文本对齐类轻松地将文本重新对齐到组件。
Ambitioni dedisse scripsisse iudicaretur。 Cras mattis iudicium purus坐在发酵罐中。 Donec sed dioo Operae,eu vulputate felis rhoncus。 通讯社。 死后没有坐下,西蒂蒂斯·皮罗斯·阿夫罗斯 Petierunt uti sibi concilium totius Galliae in印地语种印度。 Cras mattis iudicium purus坐在发酵罐中。
<p class="text-justify"> Ambitioni dedisse scripsisse iudicaretur。 Cras mattis iudicium purus坐在发酵罐中。 Donec sed dioo Operae,eu vulputate felis rhoncus。 通讯社。 死后没有坐下,西蒂蒂斯·皮罗斯·阿夫罗斯 Petierunt uti sibi concilium totius Galliae in印地语种印度。 Cras mattis iudicium purus坐在发酵罐中。 </p>对于左,右和中心对齐,可以使用与网格系统使用相同视口宽度断点的响应类。
在所有视口尺寸上左对齐文本。
在所有视口尺寸上将对齐的文本居中。
在所有视口尺寸上右对齐的文本。
在大小为SM（较小）或较大的视口上,左对齐文本。
在视口大小为MD（中）或更宽的视口上左对齐文本。
在大小为LG（大）或更宽的视口上左对齐文本。
大小为XL（超大）或更大的视口上的左对齐文本。
<p class="text-left"> 在所有视口尺寸上左对齐文本。 </p>
<p class="text-center"> 在所有视口尺寸上将对齐的文本居中。 </p>
<p class="text-right"> 在所有视口尺寸上右对齐的文本。 </p>
<p class="text-sm-left"> 在大小为SM（较小）或较大的视口上,左对齐文本。 </p>
<p class="text-md-left"> 在视口大小为MD（中）或更宽的视口上左对齐文本。 </p>
<p class="text-lg-left"> 在大小为LG（大）或更宽的视口上左对齐文本。 </p>
<p class="text-xl-left"> 大小为XL（超大）或更大的视口上的左对齐文本。 </p>文字换行和溢出
用换行 .text-wrap 类。
<div class="badge badge-primary text-wrap" style="width: 6rem;"> 该文本应换行。 </div>防止文字换行 .text-nowrap 类。
<div class="text-nowrap bd-highlight" style="width: 8rem;"> 此文本应溢出父级。 </div>对于更长的内容,您可以添加一个 .text-truncate 类,用省略号截断文本。 需要 display: inline-block or display: block.
块级别
<div class="row">
<div class="col-2 text-truncate"> 通讯社。 </div>
</div>
内联级别
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>断字
通过使用防止长文本字符串破坏组件的布局 .text-break 设置 word-wrap: break-word and word-break: break-word 。我们用 word-wrap 而不是更常见 overflow-wrap 以获得更广泛的浏览器支持,并添加不推荐使用的 word-break: break-word 避免Flex容器出现问题。
单位：毫米
<p class="text-break"> 单位：毫米 </p>文字转换
使用文本大写类在组件中转换文本。
小写的文字。
大写文本。
大写文本。
<p class="text-lowercase"> 小写的文字。 </p>
<p class="text-uppercase"> 大写文本。 </p>
<p class="text-capitalize"> 大写文本。 </p>请注意如何 .text-capitalize 仅更改每个单词的首字母,而其他任何字母的大小写均不受影响。
字体粗细和斜体
快速更改文本的粗细（粗体）或斜体。
粗体。
粗体粗体文本（相对于父元素）。
普通重量文本。
重量轻的文本。
较轻的文本（相对于父元素）。
斜体文字。
<p class="font-weight-bold"> 粗体。 </p>
<p class="font-weight-bolder"> 粗体粗体文本（相对于父元素）。 </p>
<p class="font-weight-normal"> 普通重量文本。 </p>
<p class="font-weight-light"> 重量轻的文本。 </p>
<p class="font-weight-lighter"> 较轻的文本（相对于父元素）。 </p>
<p class="font-italic"> 斜体文字。 </p>等宽空间
使用以下命令将选择更改为我们的等宽字体堆栈 .text-monospace.
这是等宽的
<p class="text-monospace"> 这是等宽的 </p>重置颜色
使用重置文字或链接的颜色 .text-reset ,以便它从其父级继承颜色。
带有的静音文本 重置链接 .
<p class="text-muted"> 带有的静音文本 <a class="text-reset" href="#"> 重置链接 </a>.</p>文字装饰
删除带有 .text-decoration-none 类。
<a class="text-decoration-none" href="#"> 未加下划线的链接 </a>