overflow-wrapプロパティ

overflow-wrapプロパティは、コンテナの幅に収まらない長い単語がある場合に、その文字を新しい行に折り返すことを可能にします。

構文

セレクタ {
	overflow-wrap: break-word | normal;
}

値	説明
`break-word`	コンテナに収まらない長い単語を新しい行に折り返します。この場合、単語は新しい行から始まります。
`normal`	標準の動作：長い単語がコンテナの幅に収まらない場合、単にその境界をはみ出します（この場合、新しい行から始まります）。

初期値：normal。

この例では、非常に長い単語がコンテナに収まらず、その境界をはみ出します（この場合、新しい行から始まります）：

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	word-wrap: normal;
	overflow-wrap: normal;
	border: 1px solid red;
	width: 200px;
}

今回は、収まらなかった文字が単に次の行に折り返されます（この場合も、長い単語は新しい行から始まります）：

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow-wrap: break-word;
	border: 1px solid red;
	width: 200px;
}