文本 | Text

文本

常见文本工具的文档和示例，以控制对齐，包装，重量等等。

文本对齐

轻松地将文本重新对齐到具有文本对齐类的组件。

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

对于左对齐，右对齐和中心对齐，可以使用与网格系统使用相同视口宽度断点的响应类。

打开getbootstrap.com上的示例

<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类一起打包。

打开getbootstrap.com上的示例

<div class="row">
  <div class="col-1 text-nowrap">
    Curabitur blandit tempus ardua ridiculus sed magna.
  </div>
  <div class="col-11">
    <img src="..." alt="An image to show the text doesn't wrap">
  </div>
</div>

对于更长的内容，您可以添加一个.text-truncate类以省略号截断文本。需要display: inline-block或display: block**.**。

打开getbootstrap.com上的示例

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

文本转换

使用文本大写类转换组件中的文本。

打开getbootstrap.com上的示例

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

请注意，text-capitalize只更改每个单词的第一个字母，使其他字母的大小写不受影响。

字体粗细和斜体

快速更改文字的粗细或斜体文字。

打开getbootstrap.com上的示例

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