文本

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

文本對齊

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

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-wrap類包裝文本。

此文本應換行。

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

防止文本用.text-nowrap類換行。

此文本應溢出父級。

<div class="text-nowrap bd-highlight" 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>

斷字

.text-break使用to set防止長字符串破壞組件的佈局overflow-wrap: break-word（以及word-break: break-wordIE 和 Edge 兼容性）。

嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯

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

文本變換

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

小寫文本。

大寫文本。

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

這是在等空間

<p class="text-monospace">This is in monospace</p>

重置顏色

用重置文本或鏈接的顏色.text-reset，以便它從其父級繼承顏色。

帶有重置鏈接的靜音文本。

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

文字裝飾

刪除帶有.text-decoration-none類的文本裝飾。

非下劃線鏈接

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