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

1.overflow-wrapとは?

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

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

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

{ overflow-wrap: 値; }

値の指定方法

2.overflow-wrapの使い方

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

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

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

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