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

こんにちは（・∀・）

CSS3で追加されるプロパティをご紹介します。今回ご紹介するCSSプロパティはword-breakです。word-breakはW3Cで審議中のプロパティをMicrosoftが先行して独自採用したものですが、今ではどのブラウザでも採用されるようになりました。

概要

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

.sample {
  word-break: break-all;
}

適用要素

すべての要素

指定できる値

break-all

どの言語でも親要素にあわせて改行
そのため単語の途中でも改行されます。

keep-all

どの言語でも親要素にあわせて改行しますが単語の途中では改行されず単語の区切りで改行

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>
<div class="demo3">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
b bb bbb bbbb bbbbb bbbbbb bbbbbbb bbbbbbbb bbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbbbb bbbbbbbbbbbbbb<br>
ああああああああああああああああああああああああああああああああああああああああああああああああああ<br>
い　いい　いいい　いいいい　いいいいい　いいいいいい　いいいいいいい　いいいいいいいい　いいいいいいいいい
</div>

CSS

.demo1 {
  word-break: break-all;
}
.demo2 {
  word-break: keep-all;
}
.demo3 {
  word-break: normal;
}

Result

関連リンク

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