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

overflow-wrapプロパティ

overflow-wrap : 値
word-wrap : 値

overflow-wrapプロパティは、単語が表示領域を超える場合の改行方法を指定します。
CSS3 Text 仕様書で名前がword-wrapからoverflow-wrapになりました。
word-wrapでも使用できます。

説明
normal 単語が表示領域を超える場合、改行せずに表示します。(初期値)
break-word 単語が表示領域を超える場合、単語の途中で改行します。
値を継承する

単語が表示領域を超える場合の改行方法のサンプルです。

改行せずに表示 (normal)

<style>
  #p1 {
    overflow-wrap: normal;
    border: 1px solid #000;
    width: 100px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p id="p1">tangonokaigyou</p>

3行目は、normalです。改行されずにはみ出します。

 

単語の途中でも改行 (break-word)

<style>
  #p1 {
    overflow-wrap: break-word;
    border: 1px solid #000;
    width: 100px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p id="p1">tangonokaigyou</p>

3行目は、break-wordです。横にはみ出さないように改行されます。

 

日本語は改行して表示 (normal)

<style>
  #p1 {
    overflow-wrap:normal;
    border: 1px solid #000;
    width: 100px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p id="p1">日本語は改行される</p>

3行目もnormalですが、日本語の場合は改行されます。

関連の記事

CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 単語の間隔を指定する
CSS overflow はみ出た部分を表示する/しない
CSS text-decoration 文字に線を引くサンプル
CSS word-break 単語の改行方法を指定

△上に戻る