line-breakプロパティは、改行規則の厳密さを指定する際に使用します。
line-breakプロパティの実際の挙動は、基本的には各言語の規則に従ってユーザーエージェントが決定しますが、
以下のルールは守られます。
以下の使用例では、line-break:strict; を指定した場合には小文字のかなの直前では改行されていません。(Google Chromeで表示確認した結果)
p.sample { width:40px; background-color:#99cc00; word-break:keep-all; }
<h5>line-break:auto; を指定</h5> <p class="sample" style="line-break:auto;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="line-break:auto;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>line-break:loose; を指定</h5> <p class="sample" style="line-break:loose;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="line-break:loose;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>line-break:normal; を指定</h5> <p class="sample" style="line-break:normal;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="line-break:normal;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>line-break:strict; を指定</h5> <p class="sample" style="line-break:strict;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="line-break:strict;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>line-break:anywhere; を指定</h5> <p class="sample" style="line-break:anywhere;"> かえる、ぴょこぴょこ、みぴょこぴょこ。 </p> <p class="sample" style="line-break:anywhere;"> 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.
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.