文字

用於控制對齊、換行、字重等功能的常見文字工具的文件和範例。

文字對齊

使用文字對齊類別輕鬆將文字重新對齊至元件。

一些佔位文字用於展示兩端對齊的文字。你會為我做同樣的事嗎？是時候面對音樂，我已不再是你的繆思。聽說很美，由你來評判，我的女孩們將投票。我可以在我內心感受到一隻鳳凰。天堂嫉妒我們的愛，天使們在上方哭泣。是的，你帶我到烏托邦。

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

<!-- 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 來設定 word-wrap: break-word 和 word-break: break-word，以防止長字串文字中斷元件的版面。我們使用 word-wrap 而不是較常見的 overflow-wrap，以獲得更廣泛的瀏覽器支援，並新增已棄用的 word-break: break-word 來避免彈性容器的問題。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

文字轉換

使用文字大寫類別來轉換元件中的文字。

小寫文字。

大寫文字。

CapiTaliZed 文字。

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