備忘録的プログラミングリファレンス

overflow-wrap プロパティ

 overflow-wrap プロパティは、単語がエレメント内に入りきらない(オーバーフロー)する場合のプロパティです。

 単語を分割してもハイフン"-"は付加されません。ハイフンを付加したい場合はhyphensプロパティを使います。

単語がオーバーフローするようなら単語に改行を入れる(Exampleを参照
overflow-wrap: break-word;

 同じ機能をもつword-wrapプロパティがあります。 overflow-wrapが公式ですが、以前から使われていたword-wrapが使えるようになっています。

ページ内 Index

構文(Syntax)

CSS

overflow-wrap: normal | break-word | anywhere | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.overflow-wrap;
値の設定
object.style.overflow-wrap=" ";

値(Values)

Value摘要
normal初期値(default値)、そのまま表示。オーバーフローになる
break-wordオーバーフローするなら単語が分割される
anywhereオーバーフローするなら単語が分割される。コンテンツ幅は自動調整される
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)normal
継承(Inherited)Yes
CSS AnimationNo

Example

 overflow-wrapの例です。エレメントに収まらない単語を途中で改行することができます。 日本語ではほぼ機能しません。英単語で機能します。