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

★CSS3リファレンス

word-wrap …… 単語の途中で改行するかどうかを指定する
Internet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5

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を指定
▲ページ先頭へ
トップページ  > CSS3  > word-wrap
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ