スポンサード

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

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

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

word-break プロパティ

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

p {
	word-break: break-all
}

word-wrap プロパティ

同じようなプロパティに、単語の途中で改行するかどうかを指定する word-wrap というモノがあります。使い方は↓このような感じです。

p {
	word-wrap:break-word
}

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

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

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

word-break で折り返し

word-wrap で折り返し

ブラウザによって微妙な差があるかもしれませんが、
で折り返しているような感じですね。改行方法が異なります。

単語の途中でも無条件に折り返すならword-break : break-all、文章を読みやすく、単語の後ろの空白で（単語区切りで）折り返してほしいならword-wrap: break-word という使い方の違いになるでしょうか。

スポンサード