[CSS]半角文字列を改行するword-breakとword-wrapの使い方と違い

divやtableなどの要素から半角文字が突き抜けて表示されないように、CSSで強制的に折り返してあげる方法のご紹介です。

今まで文字の折り返しと言えばword-breakを使う機会が多かったのですが、CSS3よりword-wrapプロパティが利用できるようになり、主要ブラウザにも対応するようになりました。

今日は、このword-breakとword-wrapのそれぞれの使い方に加えて、2つのプロパティにどのような違いがあるのかについて簡単に説明させていただきます。

word-break プロパティ

pやdiv要素にword-break: break-allを適用させると、表示範囲に合わせて文章を途中で改行して表示することができます。

word-wrap プロパティ

同じようなプロパティに単語の途中で改行するかどうかを指定するword-wrapがあります。

使い方は↓このような感じです。

どちらも半角文字列を折り返して表示したい場合に利用しますが、2つのプロパティには表示上、微妙な違いがあります。

word-break と word-wrap の表示上の違いについて

両プロパティを適用させた場合の表示上の違いを、以下の具体例で見てみます。

word-breakで折り返し

word-wrapで折り返し

ブラウザによって微妙な差があるかもしれませんが、


で折り返しているような感じですね。改行方法が異なります。


このような使い方の違いになるかと思います。