トップページ  > CSS3  > word-break

★CSS3リファレンス

word-break …… 行の改行方法を指定する
Internet Explorer5Internet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5

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>

↓↓↓

ブラウザ上の表示

左から normal、keep-all、loose、break-strict、break-all を指定

私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。

私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。

私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。

私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。

私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。

左から normal、keep-all、loose、break-strict、break-all を指定

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.

左から normal、keep-all、loose、break-strict、break-all を指定
▲ページ先頭へ
トップページ  > CSS3  > word-break
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ