文本

用於控制對齊、換行、粗細等的常用文本實用程序的文檔和示例。

文本對齊

使用文本對齊類輕鬆將文本重新對齊到組件。

Ambitioni dedisse scripsisse iudicaretur。Cras mattis iudicium purus 坐在 amet 發酵中。Donec sed odio Operae，eu vulputate felis rhoncus。Praeterea iter est quasdam res quas ex Commun。在 nos hinc posthac，sitientis piros Afros。Petierunt uti sibi concilium totius Galliae in diem certam indicere。Cras mattis iudicium purus 坐在 amet 發酵中。

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

對於左對齊、右對齊和居中對齊，可以使用響應式類，它們使用與網格系統相同的視口寬度斷點。

所有視口尺寸上的左對齊文本。

在所有視口大小上居中對齊文本。

所有視口大小上的右對齊文本。

視口大小為 SM（小）或更寬的左對齊文本。

視口大小為 MD（中）或更寬的左對齊文本。

在 LG（大）或更寬的視口上左對齊文本。

在 XL（特大）或更寬的視口上左對齊文本。

<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類換行。

此文本應溢出父級。

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

對於較長的內容，您可以添加一個.text-truncate類以使用省略號截斷文本。需要display: inline-block或display: block。

Praeterea iter est quasdam res quas ex Commun。

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

文本變換

使用文本大寫類轉換組件中的文本。

小寫文本。

大寫文本。

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

請注意如何text-capitalize只更改每個單詞的第一個字母，而不影響任何其他字母的大小寫。

字體粗細和斜體

快速更改文本的粗細（粗體）或將文本變為斜體。

粗體文字。

正常重量文本。

輕量級文本。

斜體文字。

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