CSS3のプロパティを解説する連載です。今回は、改行方法を指定するword-breakについてです。word-breakとword-wrapの違いについても取り上げています。
word-breakの指定方法
word-breakの使い方です。下記のように、改行方法を指定して使います。
word-break: 改行方法;
改行方法は、デフォルトではnormalが指定されます。normalでは、厳密に改行が行われます。それ以外の改行方法を指定することで、単語の途中であっても改行をさせることができます。下に、改行方法に指定できる値をまとめておきましょう。
| 改行方法 | CJK | 非CJK |
|---|---|---|
| normal（初期値） | 厳格に改行される。 | 言語ごとのルールに従って改行される。 |
| break-all | 緩やかに改行される。 | 単語内でも自由に改行される。 |
| keep-all | 改行されない。 | 言語ごとのルールに従って改行される。 |
※CJKとは、中国語（Chinese）と日本語（Japanese）、韓国語（Korean）をまとめた言い方のことです。
word-breakの具体例
word-breakの具体例です。改行方法を変えて、テキストを表示してあります。
CJKの場合
左から順にnormal、break-all、keep-allとなっています。
word-break: normal;
word-break: break-all;
word-break: keep-all;
非CJKの場合
同じく、左から順にnormal、break-all、keep-allとなっています。
word-wrapとの違い
CSS3には、改行を指定するプロパティが2つあります。本記事で取り上げたword-breakと、word-wrapです。どちらも改行を制御するところは同じなのですが、微妙に違いがあります。
word-break: break-all;では、どんな場合でも単語を折り返します。例えば、orといった短い単語の場合も「o」と「r」に分かれる可能性があります。
一方でword-wrap: break-word;では、単語内での折り返しもしますが、できるだけ単語途中での折り返しをしないように動作します。
どちらが優れているというわけではなく、見出しタグに使う場合はword-breakがいいでしょうし、本文ではword-wrapが合っています。状況に応じて、使い分けていくといいでしょう。
あとがき
word-breakの使い方や、word-wrapとの違いについてご紹介しました。ちょっとした違いですが、ユーザビリティを向上するためにも適切に指定しておきましょう。