ブログ

  1. トップ
  2. ブログ
  3. word-breakで改行方法を指定する(CSS3)

Web制作

word-breakで改行方法を指定する(CSS3)

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の場合

CJKの場合

左から順にnormal、break-all、keep-allとなっています。

word-break: normal;
word-break: break-all;
word-break: keep-all;

非CJKの場合

非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との違いについてご紹介しました。ちょっとした違いですが、ユーザビリティを向上するためにも適切に指定しておきましょう。