【CSS3リファレンス】overflow-wrap(word-wrap)

こんにちは（・∀・）

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはoverflow-wrap(word-wrap)です。

CSS3では従来から使用されて来たword-wrapプロパティからoverflow-wrapプロパティに変更される予定ですが、互換性を維持するため従来から使用されて来たword-wrapプロパティもそのまま残されるようです。

IE10などoverflow-wrapプロパティが未対応のブラウザ等を考慮して当分の間はword-wrapプロパティを使用するかoverflow-wrapとword-wrapを併記するのが良さそうです。

概要

overflow-wrap(word-wrap)プロパティは英単語など通常では折り返さない部分でも、親要素の大きさにあわせてはみ出る部分は改行するように指定する事ができるプロパティです。

.sample {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

適用要素

すべての要素

指定できる値

break-word

英単語やURLなど分の途中でも親要素にあわせて改行

normal

改行しない

初期値

normal

サンプル

HTML

<div class="demo1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
b bb bbb bbbb bbbbb bbbbbb bbbbbbb bbbbbbbb bbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbbbb bbbbbbbbbbbbbb<br>
ああああああああああああああああああああああああああああああああああああああああああああああああああ<br>
い　いい　いいい　いいいい　いいいいい　いいいいいい　いいいいいいい　いいいいいいいい　いいいいいいいいい
</div>
<div class="demo2">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
b bb bbb bbbb bbbbb bbbbbb bbbbbbb bbbbbbbb bbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbbbb bbbbbbbbbbbbbb<br>
ああああああああああああああああああああああああああああああああああああああああああああああああああ<br>
い　いい　いいい　いいいい　いいいいい　いいいいいい　いいいいいいい　いいいいいいいい　いいいいいいいいい
</div>

CSS

.demo1 {
  word-wrap: break-word;
}
.demo2 {
  word-wrap: normal;
}

Result

関連リンク

【CSS3リファレンス】word-break