|
★CSS3リファレンス
word-wrap …… 単語の途中で改行するかどうかを指定する
word-wrapプロパティは、単語の途中で改行するかどうかを指定する際に使用します。
改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示されます。このような場合、word-wrapプロパティの値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー（はみ出し）を防ぐことができます。
word-wrapプロパティは、text-wrapプロパティの値がnormal、または、suppressのときにだけ有効となります。
■値
- normal
- 改行ポイントでのみ改行する（初期値）
- break-word
- 行の中に他の改行ポイントが無い場合には、単語途中でも改行する
■適用対象・値の継承・初期値
- 初期値
- normal
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 , p.sample2 {width:40px; margin-right:50px; background-color:yellow;
float:left;
}
p.sample1 {word-wrap:normal;}
p.sample2 {word-wrap:break-word;}
div.sample0 {clear:both;}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="sample0">左から normal、break-wordを指定</div>
<p class="sample1">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<p class="sample2">私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。</p>
<div class="sample0">左から normal、break-wordを指定</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>
<div class="sample0">左から normal、break-wordを指定</div>
</body>
</html>
↓↓↓
ブラウザ上の表示
左から normal、break-wordを指定
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。
私には夢がある。私の4人の小さい子供が、いつの日か、彼らの肌の色ではなく、人格によって評価される国に住んでいるという夢が。
左から normal、break-wordを指定
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、break-wordを指定
|
©2012 HTMQ