2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

overflow-wrapの評価
頻出度
(3.0)
重要度
(3.0)
総合評価
(3.0)




1.overflow-wrapとは?

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

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

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

{ overflow-wrap: 値; }

値の指定方法

  • normal
  • break-word
  • anywhere




2.overflow-wrapの使い方

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

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

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

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

ポイント

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です