文章

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

テキストの配置

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

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-nowrapテキストがクラスで折り返されないようにします。

このテキストは、親をオーバーフローする必要があります。

<div class="text-nowrap" 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-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>