word-break …… テキストや単語の改行方法を指定する
広告
word-breakプロパティは、テキストや単語の改行方法を指定する際に使用します。
word-breakプロパティの実際の挙動は、テキストの言語によって異なります。
Chinese（中国語）、Japanese（日本語）、Korean（韓国語）の頭文字をとってCJKと呼びますが、
英語などの非CJKの言語とCKJ（中国語・日本語・韓国語）では、同じキーワードを指定しても改行方法の厳格さが異なるかもしれません。
初期値のnormalでは、その言語の習慣的な規則に従って適宜改行します。
テキストがオーバーフローした場合にのみ改行させたい場合には、overflow-wrapプロパティを使用してください。
■値
- normal
- その言語の習慣的な規則に従って適宜改行する（初期値）
- keep-all
- 単語の途中では改行しない
- break-all
- 文字列のどこでも（単語の途中でも）改行する
- break-word
- 単語の区切りで改行するが、場合によっては単語の途中でも改行する
■初期値・適用対象・値の継承
- 初期値
- normal
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
CSSソースは外部ファイル（sample.css）に記述
p.sample {
width:40px;
background-color:#99cc00;
}
HTMLソース
<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>
↓↓↓
ブラウザ上の表示
word-break:normal; を指定
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
word-break:keep-all; を指定
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
word-break:break-all; を指定
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
word-break:break-word; を指定
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
広告