CSS 単語が表示領域を超える時の改行(overflow-wrap)

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

目次

overflow-wrapのサンプル

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

<style>
#p1{overflow-wrap:normal;} /* 改行せずに表示 */
#p2{overflow-wrap:break-word;} /* 単語の途中でも改行 */
#p3{overflow-wrap:normal;} /* 日本語は改行して表示 */
p{border:1px solid #000;width:100px;height:30px;
margin-bottom:20px;text-indent:10px;background:LightCyan;}
</style>
<p id="p1">tangonokaigyou</p>
<p id="p2">tangonokaigyou</p>
<p id="p3">日本語は改行される</p>

以下は、実行結果です。
normalの場合、アルファベットは改行されませんが、日本語は改行されます。

overflow-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

関連の記事

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)

△上に戻る