
自分がよく使う書き方はこう。

```css
body {
  word-wrap: break-word;
}
```

全てのブラウザに対応しており、記述量が短い。

## 継承

以下のすべてのプロパティは子孫要素に継承する。

- overflow-wrap
- word-break
- word-wrap

よって、デフォルトの挙動を一括変更したい場合は、body要素に指定するのが良い。

## word-wrap: break-word

今のところどこでも動く。元々Microsoftの拡張としてword-wrapというプロパティが存在し、各ブラウザもword-wrapという名前で実装していたが、後にoverflow-wrapという名前に変更された。

<https://caniuse.com/#feat=mdn-css_properties_word-wrap>

## overflow-wrap: break-word

IE11等で動かない。word-wrapの新しい名前。

<https://caniuse.com/#feat=mdn-css_properties_overflow-wrap>

## word-break: break-word

`word-wrap: break-word`と同じことが、このプロパティでも実現できる。IEやEdge等で動かない。

<https://caniuse.com/#feat=mdn-css_properties_word-break_break-word>

## break-all

word-breakプロパティを使うと、break-allという値も指定できる。これを指定すると、CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようになる。


自分がよく使う書き方はこう。

2019-11-28-break-word

<p>自分がよく使う書き方はこう。</p>
<pre><code>body {
  word-wrap: break-word;
}
</code></pre>
<p>全てのブラウザに対応しており、記述量が短い。</p>
<h2>継承</h2>
<p>以下のすべてのプロパティは子孫要素に継承する。</p>
<ul>
<li>overflow-wrap</li>
<li>word-break</li>
<li>word-wrap</li>
</ul>
<p>よって、デフォルトの挙動を一括変更したい場合は、body要素に指定するのが良い。</p>
<h2>word-wrap: break-word</h2>
<p>今のところどこでも動く。元々Microsoftの拡張としてword-wrapというプロパティが存在し、各ブラウザもword-wrapという名前で実装していたが、後にoverflow-wrapという名前に変更された。</p>
<p><a href="https://caniuse.com/#feat=mdn-css_properties_word-wrap">https://caniuse.com/#feat=mdn-css_properties_word-wrap</a></p>
<h2>overflow-wrap: break-word</h2>
<p>IE11等で動かない。word-wrapの新しい名前。</p>
<p><a href="https://caniuse.com/#feat=mdn-css_properties_overflow-wrap">https://caniuse.com/#feat=mdn-css_properties_overflow-wrap</a></p>
<h2>word-break: break-word</h2>
<p><code>word-wrap: break-word</code>と同じことが、このプロパティでも実現できる。IEやEdge等で動かない。</p>
<p><a href="https://caniuse.com/#feat=mdn-css_properties_word-break_break-word">https://caniuse.com/#feat=mdn-css_properties_word-break_break-word</a></p>
<h2>break-all</h2>
<p>word-breakプロパティを使うと、break-allという値も指定できる。これを指定すると、CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようになる。</p>
