word-break プロパティ

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

構文

セレクタ {
	word-break: break-all | keep-all | normal;
}

値	説明
`break-all`	単語がコンテナに収まらない場合、長い単語を新しい行に折り返すことを強制します。
`keep-all`	表意文字（例：漢字）の改行用。
`normal`	標準の動作：長い単語がコンテナの幅に収まらない場合、単純にその境界をはみ出します（ただし、新しい行から始まります）。

デフォルト値：normal。

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

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

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

今度は、収まらなかった文字が単純に次の行に折り返されます：

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

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