cssプロパティoverflow-wrapの説明

こんにちは tanaka です。

今回は、
cssプロパティ
overflow-wrap の説明です。

overflow-wrapとは、
英文の
右側の自動改行をコントロールする
プロパティです。


URLが枠からはみ出た時、
このプロパティを使うと

URLを枠内に収めることができます。

overflow-wrap: normal

画像blog-overflow-wrap01

overflow-wrap: break-word

画像blog-overflow-wrap02

値は2種類
 1:overflow-wrap: normal   = 英文改行ルール(初期値)
 2:overflow-wrap: break-word = 英文改行ルール + 右側が入らなくなったら即改行

英文改行ルールとは

英文の文章は、
右側が行き詰まり、改行が必要となっても
特定の記号のところでしか改行をしないというルールがあリます。

<特定の記号>
 半角スペース      ( )
 半角クエスチョンマーク (?)
 半角ハイフン      (-)

例1)
改行が必要になっても
特定の記号の所だけでしか改行されない。

画像blog-overflow-wrap08

例2)
URLなどは、特定の記号が少なく改行されない場合も多い。

画像blog-overflow-wrap09

例3)
¥¥は、例外として改行される

画像blog-overflow-wrap07

(¥¥が英文にとって何を意味するかは知りません)

それでは、
詳しく説明していきます。

overflow-wrap: normal;
overflow-wrap: break-word;

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

overflow-wrapの説明

overflow-wrapとは

overflow-wrapとは、
英文の
右側の自動改行をコントロールする
プロパティです。

URLが枠からはみ出た時、
このプロパティを使うと

URLを枠内に収めることができます。

画像blog-overflow-wrap02

英文の特殊な改行ルール

なぜURLは、
枠からはみ出たりするのでしょうか?

それは、
英文の改行には
特殊な英文改行ルールがあるからです。

この英文改行ルールにより、
URLは、
枠内からはみ出ることがあります。

英文改行ルールとは

英文の文章は、
右側が行き詰まり、改行が必要となっても
特定の記号のところでしか改行をしないというルールがあリます。

<特定の記号>
 半角スペース      ( )
 半角クエスチョンマーク (?)
 半角ハイフン      (-)

例1)
改行が必要になっても
特定の記号の所だけでしか改行されない。

画像blog-overflow-wrap08

例2)
URLなどは、特定の記号が少なく改行されない場合も多い。

画像blog-overflow-wrap09

例3)
¥¥は、例外として改行される

画像blog-overflow-wrap07

(¥¥が英文にとって何を意味するかは知りません)

このように
URLがはみ出た時に
overflow-wrap: break-wordを使うと

英文改行ルール + 行き詰まったら即改行
となり、

URLを枠内へキレイに収めることができます。

値は2種類

値は2種類あります。
 1:overflow-wrap: normal   = 英文改行ルール(初期値)
 2:overflow-wrap: break-word = 英文改行ルール + 右側が入らなくなったら即改行

1:overflow-wrap: normal = 英文改行ルール(初期値)

overflow-wrap: normal = 英文改行ルール(初期値)

normalは、
英文改行ルールにしたがい改行します。


英文改行ルール = 特定の記号の場所でのみ改行

<特定の記号>
 半角スペース      ( )
 半角クエスチョンマーク (?)
 半角ハイフン      (-)

画像blog-overflow-wrap08
画像blog-overflow-wrap09
overflow-wrap: normal;
2:overflow-wrap: break-word = 英文改行ルール + 右側が入らなくなったら即改行

overflow-wrap: break-word = 英文改行ルール + 右側が入らなくなったら即改行

break-wordは、
英文改行ルールに加え、右側が入らなくなったら即改行します。

英文が途中であっても、
改行が必要になれば即改行します。


英文改行ルール = 特定の記号の場所でのみ改行

<特定の記号>
 半角スペース      ( )
 半角クエスチョンマーク (?)
 半角ハイフン      (-)

画像blog-overflow-wrap10
overflow-wrap: break-word;

まとめ

overflow-wrapとは

overflow-wrapとは、
英文の
右側の自動改行をコントロールする
プロパティ。


URLが枠からはみ出た時、
このプロパティを使うと

URLを枠内に収めることができる。

overflow-wrap: normal

画像blog-overflow-wrap01

overflow-wrap: break-word

画像blog-overflow-wrap02
値は2種類

値は2種類
 1:overflow-wrap: normal   = 英文改行ルール(初期値)
 2:overflow-wrap: break-word = 英文改行ルール + 右側が入らなくなったら即改行

overflow-wrap: normal;
overflow-wrap: break-word;
1:overflow-wrap: normal

normalは、
英文改行ルールにしたがい改行。(初期値)


英文改行ルール = 特定の記号の場所でのみ改行

<特定の記号>
 半角スペース      ( )
 半角クエスチョンマーク (?)
 半角ハイフン      (-)

画像blog-overflow-wrap08
画像blog-overflow-wrap09
overflow-wrap: normal;
2:overflow-wrap: break-word

break-wordは、
英文改行ルールに加え、右側が入らなくなったら即改行します。

英文が途中であっても、
改行が必要になれば改行します。


英文改行ルール = 特定の記号の場所でのみ改行

<特定の記号>
 半角スペース      ( )
 半角クエスチョンマーク (?)
 半角ハイフン      (-)

画像blog-overflow-wrap10
overflow-wrap: break-word;

英文改行ルールとは

英文の文章は、
右側が行き詰まり、改行が必要となっても
特定の記号のところでしか改行をしないというルールがあリます。

<特定の記号>
 半角スペース      ( )
 半角クエスチョンマーク (?)
 半角ハイフン      (-)

例1)
改行が必要になっても
特定の記号の所だけでしか改行されない。

画像blog-overflow-wrap08

例2)
URLなどは、特定の記号が少なく改行されない場合も多い。

画像blog-overflow-wrap09

例3)
¥¥は、例外として改行される

画像blog-overflow-wrap07

(¥¥が英文にとって何を意味するかは知りません)

以上、
overflow-wrap
の話でした。

ありがとうございました。

タイトルとURLをコピーしました