CSSのword-breakの使い方

CSSには、文章の折り返しに関するプロパティに２種類あります。word-wrapとword-breakです。似ていて少しややこしいので、使い方を間違わないよう注意が必要です。

word-wrapは文章が長くなってしまって折り返しが必要な場合、単語の途中でも折り返すかどうかを指定するプロパティです。対して、word-breakは単語に関わらず行の改行についての指定を行うプロパティです。

今回は、word-breakについてご紹介します。

word-breakの使い方

word-breakではCJKとよばれる中国語、日本語、韓国語における言語と、非CJKと呼ばれるそれ以外の言語に改行についての指定を行うことになります。

具体的な記述の仕方は以下のようになります。

値には、normal/keep-all/loose/break-strict/break-allのいずれかを指定します。

normal

CJKの言語は改行の制限が厳しく、非CJKは元の言語のルールに従って改行します。これがデフォルトの状態です。

keep-all

CJKは改行しなくなります。非CJKはnormalの時と変わりません。

loose

CJKの改行制限が緩くなります。非CJKはnormalの時と変わりません。

break-strict

CJKはnormalと同様に厳しい改行制限になります。非CJKは自由に改行できるようになります。

break-all

CJKはlooseと同様の緩い改行制限になり、非CJKはbreak-strictと同様で自由に改行できるようになります。

基本的に、使いどころがあるのはbreak-allがほととんどです。