@ CSS

word-wrap プロパティ

word-wrap プロパティは、英語の単語を途中で改行するかどうかを指定する際に使用します。

改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示されます。このような場合、word-wrapプロパティの値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー(はみ出し)を防ぐことができます。

word-wrapプロパティは、text-wrapプロパティの値がnormal、または、suppressのときにだけ有効となります。

word-wrapプロパティの値
説明
normal 改行ポイントでのみ改行する(初期値)
break-word 行の中に他の改行ポイントが無い場合には、単語途中でも改行する

property_word_wrap

<style>
div {
  width: 170px;
  margin-bottom: 20px;
  background-color: yellow;
}
.normal {
  word-wrap: normal;
}
.break-word {
  word-wrap: break-word;
}
</style>

<p><b>word-wrap: normal</b></p>
<div class="normal">
  <div>This is english sentence with no space.</div>
  <div>Thisisenglishsentencewithoutspace.</div>
  <div>空白の無い日本語の文章です。</div>
  <div>空白 を含む 日本語 の 文章 です。</div>
</div>

<p><b>word-wrap: break-word</b></p>
<div class="break-word">
  <div>This is english sentence with no space.</div>
  <div>Thisisenglishsentencewithoutspace.</div>
  <div>空白の無い日本語の文章です。</div>
  <div>空白 を含む 日本語 の 文章 です。</div>
</div>