テキスト

配置、折り返し、太字などを制御するための一般的なテキストユーティリティです。

Text alignment

テキストアライメント(配置)クラスを使用して、テキストを簡単に配置できます。 開始、終了、中央揃えには、グリッドシステムと同じ viewport 幅のブレークポイントを使用するレスポンシブクラスが利用できます。

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra-large) or wider.

vue
<template>
 <b-p text-alignment="start">
  Start aligned text on all viewport sizes.
 </b-p>
 <b-p text-alignment="center">
  Center aligned text on all viewport sizes.
 </b-p>
 <b-p text-alignment="end">
  End aligned text on all viewport sizes.
 </b-p>

 <b-p text-alignment="sm-start">
  Start aligned text on viewports sized SM (small) or wider.
 </b-p>
 <b-p text-alignment="md-start">
  Start aligned text on viewports sized MD (medium) or wider.
 </b-p>
 <b-p text-alignment="lg-start">
  Start aligned text on viewports sized LG (large) or wider.
 </b-p>
 <b-p text-alignment="xl-start">
  Start aligned text on viewports sized XL (extra-large) or wider.
 </b-p>
</template>

Text wrapping and overflow

text-wrap="wrap" でテキストを折り返しできます。

text-wrap="nowrap" にするとテキスト折り返しを抑止します。

This text should wrap.
This text should overflow the parent.
vue
<template>
 <b-div
  badge
  background-color="primary"
  text-wrap="wrap"
  style="width: 6rem"
 >
  This text should wrap.
 </b-div>
 <b-div
  background-color="highlight"
  text-wrap="nowrap"
  style="width: 8rem"
 >
  This text should overflow the parent.
 </b-div>
</template>

Word break

text-break 属性を使って word-wrap: break-word と word-break: break-word を設定することで、長い文字列がレイアウトを崩すのを防ぎます。

ブラウザのサポート範囲を広げるために、より一般的な overflow-wrap の代わりに word-wrap を使用し、フレックスコンテナの問題を避けるために非推奨の word-break: break-word を追加します。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

vue
<template>
 <b-p text-break>
  mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
 </b-p>
</template>

Text transform

テキストの大文字・小文字化、text-transform 属性を利用できます。

Lowercased text.

Uppercased text.

CapiTaliZed text.

vue
<template>
 <b-p text-transform="lowercase">
  Lowercased text.
 </b-p>
 <b-p text-transform="uppercase">
  Uppercased text.
 </b-p>
 <b-p text-transform="capitalize">
  CapiTaliZed text.
 </b-p>
</template>

text-transform="capitalize" は各単語の最初の文字だけを変更します。

Font size

見出しクラス（例： level="1-6"）は font-size、 font-weight、および line-heightを適用します.

下記の例は font-size を適用します。サイズは 見出し要素と一致しているので、数値を上げるとサイズが小さくなります。

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

vue
<template>
 <b-p font-size="1">
  .fs-1 text
 </b-p>
 <b-p font-size="2">
  .fs-2 text
 </b-p>
 <b-p font-size="3">
  .fs-3 text
 </b-p>
 <b-p font-size="4">
  .fs-4 text
 </b-p>
 <b-p font-size="5">
  .fs-5 text
 </b-p>
 <b-p font-size="6">
  .fs-6 text
 </b-p>
</template>

Font weight and italics

テキストの font-weight や font-style を変更できます。

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

vue
<template>
 <b-p font-weight="bold">
  Bold text.
 </b-p>
 <b-p font-weight="bolder">
  Bolder weight text (relative to the parent element).
 </b-p>
 <b-p font-weight="normal">
  Normal weight text.
 </b-p>
 <b-p font-weight="light">
  Light weight text.
 </b-p>
 <b-p font-weight="lighter">
  Lighter weight text (relative to the parent element).
 </b-p>
 <b-p font-style="italic">
  Italic text.
 </b-p>
 <b-p font-style="normal">
  Text with normal font style
 </b-p>
</template>

Line height

line-height を変更できます。

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

vue
<template>
 <b-p line-height="1">
  This is a long paragraph written to show how the line-height of an element
  is affected by our utilities. Classes are applied to the element itself or
  sometimes the parent element. These classes can be customized as needed with
  our utility API.
 </b-p>
 <b-p line-height="sm">
  This is a long paragraph written to show how the line-height of an element
  is affected by our utilities. Classes are applied to the element itself or
  sometimes the parent element. These classes can be customized as needed with
  our utility API.
 </b-p>
 <b-p line-height="base">
  This is a long paragraph written to show how the line-height of an element
  is affected by our utilities. Classes are applied to the element itself or
  sometimes the parent element. These classes can be customized as needed with
  our utility API.
 </b-p>
 <b-p line-height="lg">
  This is a long paragraph written to show how the line-height of an element
  is affected by our utilities. Classes are applied to the element itself or
  sometimes the parent element. These classes can be customized as needed with
  our utility API.
 </b-p>
</template>

Monospace

font-monospace を使って等幅フォントに変更できます。

This is in monospace

vue
<template>
 <b-p font-monospace>
  This is in monospace
 </b-p>
</template>

Reset color

テキストやリンクの色を `text-reset` でリセットし、親から色を継承するようにします。

Muted text with a reset link .

vue
<template>
 <b-p text-color="body-secondary">
  Muted text with a
  <Anchor
   to="/"
   text-reset
  >
   reset link
  </Anchor>
  .
 </b-p>
</template>

Text decoration

text-decoration 属性で文字を装飾できます。

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed
vue
<template>
 <b-p text-decoration="underline">
  This text has a line underneath it.
 </b-p>
 <b-p text-decoration="line-through">
  This text has a line going through it.
 </b-p>
 <Anchor
  to="/"
  text-decoration="none"
 >
  This link has its text decoration removed
 </Anchor>
</template>

See Also