overflow-wrap：インライン要素に対してテキストが行から溢れる際に単語の途中で折り返すかどうかを指定する

overflow-wrapプロパティの説明

overflow-wrapは、インライン要素に対してテキストが行から溢れる際に単語の途中で折り返すかどうかを指定します。この機能は、もともとword-wrapというプロパティ名で実装されていました。Internet Explorerが独自に採用した仕様であり、後に多くのブラウザが採用しましたが、現在ではoverflow-wrapに置き換えられたものとなっています。

多くの場合、オーバーフローの制御はコンテンツを包含するブロック要素のコンテナで行いますが、本プロパティは長い単語やURLなどの特定の文字列の折り返しを制御したい場合に有効です。

overflow関連のプロパティには以下のものがあります。目的に応じて使い分けて下さい。

• overflow-x：水平軸のオーバーフロー
• overflow-y：垂直軸のオーバーフロー
• overflow：上記の一括操作

overflow-wrapに指定できる値

normal

通常の改行規則を適用します。単語の途中では改行せずに、空白で区切れた箇所で折り返します。

anywhere

コンテンツがボックスから溢れることを防ぐために任意の箇所で折り返します。文字数の多い単語やURLの途中で改行を行いますが、ハイフンを挿入することはありません。コンテンツの最小寸法を計算する祭には、単語の分割によって導入された折り返し可能位置が考慮されます。

break-word

anywhereと同じ規則で折り返しますが、コンテンツの最小寸法を計算する祭に、単語の分割によって導入された折り返し可能位置を考慮しません。

overflow-wrapの使い方とサンプル

overflow-wrapプロパティの構文は以下の通りです。

/* キーワード値 */
overflow-wrap: normal;
overflow-wrap: anywhere;
overflow-wrap: break-word;

/* グローバル値 */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: unset;

overflow-wrapの実例

それでは実際にoverflow-wrapプロパティの書き方を見ていきましょう。以下の例は、インライン要素の<span>で囲った単語区切りの内容と数字の羅列に対して、同じoverflow-wrapの値を適用した時の比較です。それぞれの文字列がどこで折り返されるのか確認して下さい。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	max-width: 200px;
	margin: .5rem 0 0;
	padding: .5rem;
	border: 1px solid #aaa;
	background-color: #fff;
}
#ow_1 > span {
	overflow-wrap: normal;
}
#ow_2 > span {
	overflow-wrap: anywhere;
}
#ow_3 > span {
	overflow-wrap: break-word;
}

<section class="samp_box">
	<h2>overflow-wrap: normal;</h2>
	<p id="ow_1">
		<span>One Two Three Four Five Six Seven.</span>
		<span>123456789012345678901234567890.</span>
	</p>
	<h2>overflow-wrap: anywhere;</h2>
	<p id="ow_2">
		<span>One Two Three Four Five Six Seven.</span>
		<span>123456789012345678901234567890.</span>
	</p>
	<h2>overflow-wrap: break-word;</h2>
	<p id="ow_3">
		<span>One Two Three Four Five Six Seven.</span>
		<span>123456789012345678901234567890.</span>
	</p>
</section>