Title

overflow-wrapとは

ここで説明するoverflow-wrap とは次の語句からなるCSSのプロパティです。

overflow

読み: オーバーフロー
意味: あふれる、こぼれる

wrap

読み: ラップ
意味: 包む、くるむ

目次に戻る

overflow-wrapプロパティの概要

このプロパティは単語の改行をするかどうかを指定します。

簡単に説明すると要素内の単語が溢れないように自動で強制改行するのか、 強制改行しないで単語の表示を優先して改行するのかを設定することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{overflow-wrap: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使うのは次に示すdiv要素です。これにoverflow-wrapを設定していきます。

目次に戻る

初期値: normal

初期値のnormalは単語の空白などの分割された位置のみ改行されます。 長い単語やURLは折り返されず、要素内からはみ出してしまいます。

div{
	max-width: 140px;
	min-width: 100px;
	width: min-content;
	height: fit-content;
	overflow-wrap: normal;
}

目次に戻る

キーワード値: anywhere

anywhereキーワードは分割可能な位置が無い、長い単語やURLの途中でもテキストは自動で改行される場合があります。 しかし、単語ごとの分割位置は考慮されます。 また、分割位置にハイフンの文字は挿入されません。

なお、単語ごとの分割位置を考慮するため、ブラウザよっては折り返されずに内容が溢れる場合があります。

div{
	max-width: 140px;
	min-width: 100px;
	width: min-content;
	height: fit-content;
	overflow-wrap: anywhere;
}

目次に戻る

キーワード値: break-word

anywhereキーワードと同じで分割可能な位置が無い、長い単語やURLの途中でもテキストは自動で改行されます。 またanywhereとは違い、このbreak-wordは単語ごとの分割位置は考慮されません。

つまり、このキーワードを使うとテキストは確実に要素から溢れないように折り返しされるとういことになります。

div{
	max-width: 140px;
	min-width: 100px;
	width: min-content;
	height: fit-content;
	overflow-wrap: break-word;
}

目次に戻る

グローバル値

overflow-wrapプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnormalに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

セレクター{overflow-wrap: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素のテキストとURLに同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

overflow-wrap: normal;

overflow-wrap: anywhere;

overflow-wrap: break-word;

目次に戻る