Bootstrap5テキストクラス

2022年9月14日2023年9月30日

テキストの折り返し

text-wrap

.text-wrap はテキストの自動改行を許可します。

This text should wrap.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

text-nowrap

.text-nowrap はテキストの自動改行を禁止します。

This text should overflow the parent.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

text-break

.text-break は word-wrap:break-word と word-break:break-word が設定され、長い文字列のレイアウト崩れを防ぎます。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

大文字・小文字

text-lowercase

.text-lowercase はテキストを小文字にします。

Lowercased text.

<p class="text-lowercase">Lowercased text.</p>

text-uppercase

.text-uppercase はテキストを大文字にします。

Uppercased text.

<p class="text-uppercase">Uppercased text.</p>

text-capitalize

.text-capitalize は各単語の最初の文字だけを大文字します。

CapiTaliZed text.

<p class="text-capitalize">CapiTaliZed text.</p>

文字の太さ・スタイル

テキストの font-weight や font-style を変更できます。 font-style は.fst-*と省略され、 font-weight は .fw-*と省略されます。

fw-bold

.fw-bold は太文字にします。（数値で700を指定した場合と同じ）

Bold text.

<p class="fw-bold">Bold text.</p>

fw-bolder

.fw-bolder は相対的に一段階文字を太くします。

Bolder weight text (relative to the parent element).

<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>

fw-normal

.fw-normal は標準の太さです。（数値で400を指定した場合と同じ）

Normal weight text.

<p class="fw-normal">Normal weight text.</p>

fw-light

.fw-light は細文字にします。（数値で300を指定した場合と同じ）

Light weight text.

<p class="fw-light">Light weight text.</p>

fw-lighter

.fw-lighter は相対的に一段階文字を細くします。

Lighter weight text (relative to the parent element).

<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>

fst-italic

.fst-italic はイタリック体フォントで表示します。

Italic text.

<p class="fst-italic">Italic text.</p>

fst-normal

.fst-normal は標準フォントで表示します。初期値。

Text with normal font style

<p class="fst-normal">Text with normal font style</p>

テキスト省略

text-truncate

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