[CSS] overflow-wrapプロパティで単語の途中での改行を指定しよう!

overflow-wrapの評価

頻出度

(3.0)

重要度

(3.0)

総合評価

(3.0)

overflow-wrapプロパティは単語の途中での改行を指定します。

CSS3からword-wrapからoverflow-wrapに改名されて最新のブラウザはこの名称で実装されています。

値の指定方法は以下の通りです。

{ overflow-wrap: 値; }

それではoverflow-wrapの使い方をみていきましょう。

p {
 width: 200px;
 background-color: red;
 word-break: break-word;
 overflow-wrap: break-word;
}

上記のようにすることで単語の途中で改行されます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!

ポイント

最新のブラウザはoverflow-wrapに対応していますが、Internet Explorerへのフォールバックとしてword-wrapを併記することをオススメします。