overflow-wrapプロパティ

overflow-wrapプロパティは、 コンテナの幅に収まらない長い単語がある場合に、 その文字を新しい行に折り返すことを可能にします。

構文

cssセレクタ {
  overflow-wrap: break-word | normal;
}

値

初期値：normal。

例 . normal値

この例では、非常に長い単語がコンテナに収まらず、 その境界をはみ出します（この場合、新しい行から始まります）：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  word-wrap: normal;
  overflow-wrap: normal;
  border: 1px solid red;
  width: 200px;
}

Результат:

例 . break-word値

今回は、収まらなかった文字が単に次の行に折り返されます（この場合も、 長い単語は新しい行から始まります）：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow-wrap: break-word;
  border: 1px solid red;
  width: 200px;
}

Результат:

関連項目