CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)

CSSの単語が表示領域を超える場合の改行方法を指定するサンプルです。
overflow-wrap / word-wrapを使用します。

overflow-wrap / word-wrap プロパティ

overflow-wrap : 値
word-wrap : 値
説明
normal 単語が表示領域を超える場合、改行せずに表示します。(初期値)
break-word 単語が表示領域を超える場合、単語の途中で改行します。
値を継承する
  • CSS3 Text 仕様書でword-wrapの名前が変更になりoverflow-wrapになりました。word-wrapでも使用できます。
  • 日本語は、値がnormalでも改行されます。
  • 以下はMDNのoverflow-wrapプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

コード

サンプルのコードです。
4行目は、normalを指定しています。18行目の文字(単語)は表示領域を超えて表示されます。
8行目は、break-wordを指定しています。19行目の文字(単語)は表示領域内で改行されます。
12行目は、normalを指定しています。20行目の文字(単語)は日本語なので改行されます。

<style>
#box1{
	background-color:LightCyan;
	overflow-wrap:normal;
}
#box2{
	background-color:Cornsilk;
	overflow-wrap:break-word;
}
#box3{
	background-color:LightCyan;
	overflow-wrap:normal;
}
#d1 div{width:150px;height:50px;border:1px solid #000;margin-bottom:15px;}
</style>
<body >
<div id="d1">
<div id="box1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="box2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="box3">ああああああああああああああああ</div>
</div>
</body>

サンプル

上記コードのサンプルです。
以下は、overflow-wrapの設定を上からnormal、break-word、normalとしています。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
ああああああああああああああああ

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 文字の垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)
CSS 単語の改行方法を指定するサンプル(word-break)




△上に戻る