文章

配置、折り返し、ウェイトなどを制御する一般的なテキストユーティリティのドキュメントと例。

テキストの配置

テキスト配置クラスを使用して、テキストをコンポーネントに簡単に再配置します。

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. nos hinc posthac では、sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

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

テキスト変換

テキストの大文字化クラスを使用して、コンポーネント内のテキストを変換します。

小文字のテキスト。

大文字のテキスト。

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