word-wrapプロパティに指定できる値
word-wrapプロパティには以下の値を設定することができます。
| 値 | 内容 |
|---|---|
| normal | 初期値。行の途中で改行を行う。 |
| break-word | 行の途中で改行するポイントが無い場合、単語の途中であっても改行を行う。 |
Note
CSS3ではoverflow-wrapプロパティが用意され、word-wrapプロパティは後方互換として残されたプロパティという位置付けになっています。
IE10以前のブラウザ対応が必要など特別な理由がないときはoverflow-wrapプロパティを使用することをお勧めします。
overflow-wrapプロパティの使い方については、「overflow-wrapプロパティ」を参照してください。
使用例
word-wrapプロパティを使用するコードと、ブラウザでの表示を確認していきます。
今回は2つのテキストを用意し、それぞれ
CSS コード例
.sample1 p {
font-size: 32px;
line-height: 1.6;
}
.sample1 .text1 {
word-wrap: normal;
}
.sample1 .text2 {
word-wrap: break-word;
}HTML コード例
<div class="sample1 first">
<h2>word-wrap: normal;</h2>
<p class="text1">He answered it immediately.</p>
</div>
<div class="sample1">
<h2>word-wrap: break-word;</h2>
<p class="text2">He answered it immediately.</p>
</div>ブラウザで表示してみると以下のようになります。
1つ目のテキストでは「word-wrap: normal;」を指定していますが、行の途中で単語を極力改行しない表示になっています。
テキストの表示幅をはみ出たような表示にはなっていますが、単語が途中で区切られないため読みやすい形になっています。
2つ目の「word-wrap: break-word;」を指定したテキストでは、単語が途中でも行の改行を優先した表示になっていることが分かります。
テキストの幅を優先したいときは有効な設定です。