|
★CSS3リファレンス
word-breakプロパティは、行の改行方法を指定する際に使用します。
word-breakプロパティで指定できる値には、normal・keep-all・loose・break-strict・break-allがあります。キーワードによってCJK（ハングル、日本語のカナ、および、CJK表意文字）と非CJKにおける改行制限の厳格さの程度を指定することができます。ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものです。
アラビア語のような整形文が、break-all、あるいは、break-strictで単語内での改行が許可されるとき、文字はあたかも単語が改行されなかったように整形されます。
■値
- normal
- CJKは厳格に改行制限される、非CJKはそれら自身のルールに従って改行される（初期値）
- keep-all
- CJKは改行しない、非CSKはnormalと同じ（keep-allは、韓国語のようにホワイトスペースの存在が改行のきっかけとなる場合にのみ使用するべき値）
- loose
- CJKはより緩やかな改行制限となる、非CSKはnormalと同様
- break-strict
- CJKはnormalと同様、非CJKはどこでも改行できる（break-strictは、CJK文字が中心で非CJKの抜粋をわずかに含むようなテキストを、それぞれの行に均等に分布させたいときに使用されることがほとんど）
- break-all
- CJKはlooseと同様、非CJKはbreak-strictと同様
■適用対象・値の継承・初期値
- 初期値
- normal
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 , p.sample2 , p.sample3 , p.sample4 , p.sample5 {width:40px; margin-right:50px; background-color:yellow;
float:left;
}
p.sample1 {word-break:normal;}
p.sample2 {word-break:keep-all;}
p.sample3 {word-break:loose;}
p.sample4 {word-break:break-strict;}
p.sample5 {word-break:break-all;}
div.sample0 {clear:both;}
HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css"
type="text/css">
</head>
<body>
<div class="sample0">左から normal、keep-all、loose、break-strict、break-all を指定</div>
<p class="sample1">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<p class="sample2">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<p class="sample3">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<p class="sample4">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<p class="sample5">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<div class="sample0">左から normal、keep-all、loose、break-strict、break-all を指定</div>
<p class="sample1">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample2">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample3">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample4">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample5">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<div class="sample0">左から normal、keep-all、loose、break-strict、break-all を指定</div>
</body>
</html>
ブラウザ上の表示
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.
|
