文本

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

文本對齊

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

一些佔位符文本來演示對齊的文本對齊方式。你會為我做同樣的事嗎？是時候面對音樂了，我不再是你的繆斯。聽說它很漂亮，當評委，我的女孩們會投票。我能感覺到我體內有一隻鳳凰。天堂嫉妒我們的愛，天使從天而降。是的，你帶我去烏托邦。

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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 setword-wrap: break-word和防止長字符串破壞組件的佈局word-break: break-word。我們使用word-wrap而不是更常見overflow-wrap的更廣泛的瀏覽器支持，並添加不推薦使用word-break: break-word以避免彈性容器問題。

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

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