@ CSS

word-break プロパティ

word-breakプロパティは、行の改行方法を指定する際に使用します。

word-breakプロパティで指定できる値には、normal・keep-all・break-allがあります。キーワードによってCJK(ハングル、日本語のカナ、および、CJK表意文字)と非CJKにおける改行制限の厳格さの程度を指定することができます。ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものです。

word-breakプロパティの値
説明
normal デフォルトの改行ルールを使用する。
break-all CJK(中国語、台湾語、日本語、韓国語)以外のテキストでは、単語中などでの文字の改行に関する 禁則処理を解除し、どの文字の間でも改行するようにします。
keep-all CJK テキストの改行を許可しません。CJK 以外のテキストについては normal と同じ挙動となります。

property_word_break

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

<p><b>word-break: normal</b></p>
<div class="normal">
  <div>This is english sentence with no space.</div>
  <div>Thisisenglishsentencewithoutspace.</div>
  <div>空白の無い日本語の文章です。</div>
  <div>空白 を含む 日本語 の 文章 です。</div>
  <div>공백이없는한국어문장입니다.</div>
  <div>공백이 포함 된 한국어 문장입니다.</div>
  <div>空白的是没有中国的文字。</div>
  <div>这是一个 中国的句子 包括空白。</div>
</div>

<p><b>word-break: break-all</b></p>
<div class="break-all">
  <div>This is english sentence with no space.</div>
  <div>Thisisenglishsentencewithoutspace.</div>
  <div>空白の無い日本語の文章です。</div>
  <div>空白 を含む 日本語 の 文章 です。</div>
  <div>공백이없는한국어문장입니다.</div>
  <div>공백이 포함 된 한국어 문장입니다.</div>
  <div>空白的是没有中国的文字。</div>
  <div>这是一个 中国的句子 包括空白。</div>
</div>

<p><b>word-break: keep-all</b></p>
<div class="keep-all">
  <div>This is english sentence with no space.</div>
  <div>Thisisenglishsentencewithoutspace.</div>
  <div>空白の無い日本語の文章です。</div>
  <div>空白 を含む 日本語 の 文章 です。</div>
  <div>공백이없는한국어문장입니다.</div>
  <div>공백이 포함 된 한국어 문장입니다.</div>
  <div>空白的是没有中国的文字。</div>
  <div>这是一个 中国的句子 包括空白。</div>
</div>