文章
配置、折り返し、ウェイトなどを制御する一般的なテキスト ユーティリティのドキュメントと例。
テキストの配置
テキスト配置クラスを使用して、テキストをコンポーネントに簡単に再配置します。
正当化されたテキストの配置を示すためのプレースホルダー テキスト。私にも同じことをしてくれますか？私はもはやあなたのミューズではありません。それが美しいと聞いて、裁判官になり、私の女の子が投票するつもりです. 自分の中に鳳凰を感じる。天国は私たちの愛に嫉妬し、天使たちは上から泣いています。ええ、あなたは私をユートピアに連れて行ってくれます。
<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-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 setword-wrap: break-wordおよびを使用して、長い文字列のテキストがコンポーネントのレイアウトを壊さないようにしますword-break: break-word。より広いブラウザ サポートのためword-wrapに、より一般的なものの代わりに使用し、非推奨のものを追加して、フレックス コンテナの問題を回避します。overflow-wrapword-break: break-word
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>