CSSのword-wrapの使い方

文章が長くなってきて、ボックスに収まらない場合、単語の途中で改行はされずはボックスからはみ出して表示されます。ですが、ボックスから文章がはみ出すのは避けたいということがあるかと思います。

単語の途中でもいいから、ボックスから文章をはみ出させず、折り返させたい場合には、word-wrapを使用します。

word-wrapを使用して折り返しの指定をする

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

値には、normalか、break-wordを指定します。

normalはデフォルトで、単語の途中では折り返しません。break-wordを指定すると、単語の途中でも強制的に折り返して、文章がはみ出さなくなります。

単語の途中で折り返さない場合

単語の途中でも折り返す場合

それぞれのCSSを適用してみた場合の表示サンプルです。

スマートフォン向けのサイトには欠かせないプロパティ

URLなどを記載した場合、word-wrapを指定していないと、URLがすべて横一行で表示されてしまう為スマートフォンでサイトを閲覧した時、レイアウトが崩れてしまうだけでなく、文章の途中で変な方向にスクロールが必要になってしまうことがあります。

スマートフォン向けのサイトを作成する場合は、英単語だけでなくURLの表示などにも気をつけてみると良いでしょう。