word-breakプロパティは、テキストや単語の改行方法を指定する際に使用します。
word-breakプロパティの実際の挙動は、テキストの言語によって異なります。
Chinese（中国語）、Japanese（日本語）、Korean（韓国語）の頭文字をとってCJKと呼びますが、
英語などの非CJKの言語とCKJ（中国語・日本語・韓国語）では、同じキーワードを指定しても改行方法の厳格さが異なるかもしれません。
初期値のnormalでは、その言語の習慣的な規則に従って適宜改行します。
テキストがオーバーフローした場合にのみ改行させたい場合には、overflow-wrapプロパティを使用してください。
p.sample {
width:40px;
background-color:#99cc00;
}
<h5>word-break:normal; を指定</h5> <p class="sample" style="word-break:normal;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="word-break:normal;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>word-break:keep-all; を指定</h5> <p class="sample" style="word-break:keep-all;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="word-break:keep-all;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>word-break:break-all; を指定</h5> <p class="sample" style="word-break:break-all;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="word-break:break-all;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>word-break:break-word; を指定</h5> <p class="sample" style="word-break:break-word;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="word-break:break-word;"> Three frogs leaping together. They're three pyokopyoko. </p>
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.