文章
配置、折り返し、ウェイトなどを制御する一般的なテキスト ユーティリティのドキュメントと例。
テキストの配置
テキスト配置クラスを使用して、テキストをコンポーネントに簡単に再配置します。
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
<!-- 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-breakto set overflow-wrap: break-word(およびword-break: break-wordIE と Edge の互換性のため)を使用して、長いテキスト文字列がコンポーネントのレイアウトを壊さないようにします。
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<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>