|
★CSS3リファレンス
text-wrapプロパティは、テキストの折り返し方法を指定する際に使用します。
text-wrapプロパティにどの値を指定しても、改行のふるまいは、強制改行（BK）・キャリッジリターン（CR）・ラインフィード（LF）などに基づいて決定されます。
text-wrapプロパティにnormal、または、suppressを指定すると、 スペース以外の句読点での改行を許可するブラウザでは改行ポイントが最優先されます。スラッシュ（ / ）の後の改行がスペースよりも優先度が低い場合、例えば、"check /etc"という記述では、'/' と 'e'の間では決して改行されません。
ブラウザはコンテナブロックの幅、テキストの言語、その他の指定条件を使用するかもしれません。間の悪い改行を避けるため、ブラウザにはスペース以外の適切な句読点が改行位置として推奨されています。特に狭い寸法の場合、その結果がより等しいマージンになるからです。
■値
- normal
- 改行ルールにしたがって改行ポイントで改行される（初期値）
- none
- 改行しない。ブロックボックスに入りきらないテキストは、はみ出して表示される
- unrestricted
- 行は２つの書記素（テキストを記述する際の基本単位）の間のどの位置でも改行する。 改行制限は効き目がなく、ハイフンも付かない。改行箇所では、まるで改行されていないかのように文字が整形される
- suppress
- 要素内では改行が抑制される。 他に妥当な改行ポイントが無い場合のみ、要素内で改行する
■適用対象・値の継承・初期値
- 初期値
- normal
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 , p.sample2 , p.sample3 , p.sample4 {width:40px; margin-right:50px; background-color:yellow;
float:left;
}
p.sample1 {text-wrap:normal;}
p.sample2 {text-wrap:none;}
p.sample3 {text-wrap:unrestricted;}
p.sample4 {text-wrap:suppress;}
div.sample0 {clear:both;}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="sample0">左から normal、none、unrestricted、suppress を指定</div>
<p class="sample1">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<p class="sample2">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<p class="sample3">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<p class="sample4">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<div class="sample0">左から normal、none、unrestricted、suppress を指定</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>
<div class="sample0">左から normal、none、unrestricted、suppress を指定</div>
</body>
</html>
ブラウザ上の表示
私には夢がある。私の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.
|
