word-wrap

単語の途中で改行させるかどうかを指定します。

サンプルコード

style.css

/* normal: 単語の途中では改行しない（初期値） */
p.test { word-wrap: normal;}

/* break-word: 単語の途中でも改行する（長いURLや文字列がはみ出るのを防ぐ） */
p.test2 { word-wrap: break-word;}

/* overflow-wrapはword-wrapの標準名 */
p.test3 { overflow-wrap: break-word;}

/* 長いURLやコードが固定幅ボックスからはみ出るのを防ぐ */
.url-box { width: 300px; word-wrap: break-word;}

/* チャットのメッセージ欄 */
.message { word-wrap: break-word; overflow-wrap: anywhere;}

/* コードブロックで改行させる場合 */
pre { word-wrap: break-word; white-space: pre-wrap;}

指定可能な値一覧

値	概要
normal	単語の途中で改行させません。この『normal』が初期値です。
break-word	包含されている要素の大きさに合わせて、単語の途中であるかどうかに関わらず改行させます。

ブラウザでの表示結果

<p style="word-wrap: normal; width: 300px; border: solid 1px;">ここはp要素です。『word-wrap: normal』と指定しています。this is a pen. Abcdefghijklmnopqrstuvwxyz AbcdefghijklmnopqrstuvwxyzAbcdefghijklmnopqrstuvwxyz</p>

<p style="word-wrap: break-word; width: 300px; border: solid 1px;">ここはp要素です。『word-wrap: break-word』と指定しています。this is a pen. Abcdefghijklmnopqrstuvwxyz AbcdefghijklmnopqrstuvwxyzAbcdefghijklmnopqrstuvwxyz</p>

概要

単語の途中で改行させるかどうかを指定します。

注意点として、『word-wrap』プロパティの他に、『word-break』プロパティ、『overflow-wrap』プロパティが存在し、こちらも単語の途中で改行させるかどうかを指定するプロパティとなっています。

『word-break』プロパティはIEが独自に採用したプロパティで、『overflow-wrap』プロパティはCSSの仕様案で『word-wrap』プロパティが改称されたプロパティとなっています。

現行のブラウザでは『word-wrap』プロパティだけ指定されることが多いです。

よくあるミス

word-wrap: break-wordを指定しても長いURLが折り返されない

『word-wrap: break-word』は単語の途中での折り返しを許可しますが、要素に幅（width）が設定されていないと折り返しが発生しません。また、古いブラウザでは『overflow-wrap: break-word』と合わせて記述することで対応範囲を広げることができます。

NG

/* widthが設定されていないと折り返しが発生しない */
.url-box { word-wrap: break-word; }

OK

/* widthを指定して折り返しが有効になる環境を整える */
.url-box {
    width: 300px;
    word-wrap: break-word;
    overflow-wrap: break-word; /* 標準化された名称も記述 */
}

word-wrapとword-breakの違いを混同してしまう

『word-wrap: break-word』と『word-break: break-all』はどちらも単語の途中での改行を許可しますが、挙動が異なります。『break-word』は長い単語がボックスをはみ出す場合にのみ分割し、『break-all』はすべての文字の境界で改行を許可します。

/* break-word: 長い単語がはみ出す場合のみ途中で改行する */
.box-a { word-wrap: break-word; }

/* break-all: すべての文字境界で改行を許可する（テキストが細かく分断されやすい） */
.box-b { word-break: break-all; }