word-wrap：単語の途中での改行処理の仕方を指定する
| 適用対象 | 全ての要素 |
| 継承 | する |
word-wrapプロパティは、当初Internet Explorerが独自に採用したもので、表示範囲内に収まりきらない長い単語がある場合に、単語の途中で改行するかどうかを指定する際に使用します。最新のブラウザでは実装されているものが増えています。長いURLの改行をコントロールする際に重宝します。
日本語を途中で改行させたくない場合はword-breakプロパティを使うようです。
word-wrapに与えられる値
- word-wrap: normal;
- 単語の途中では改行はしません。必要であれば表示範囲の方を調整します。
- word-wrap: break-word;
- 必要に応じて単語の途中で改行します。
word-wrapの使用サンプル
CSS
.text_sample01 {
word-wrap: normal;
width: 300px;
background-color:#EEEEEE;
padding: 5px;
margin: 0px 0px 10px 0px;
}
.text_sample02 {
word-wrap: break-word;
width: 300px;
background-color:#EEEEEE;
padding: 5px;
}
XHTML
<div class="text_sample01">
text_sample01 [word-wrap: normal;]<br />
長いURLを記述した際どのように改行されるのか、お使いのブラウザで確認してみましょう。<br />
<br />
https://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html<br />
<br />
https://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html<br />
<br />
https://www.example.com/aaaaa_aaaaa/012345-6789/xxxxx_xxxxx.html<br />
</div>
<div class="text_sample02">
text_sample02 [word-wrap: break-word;]<br />
長いURLを記述した際どのように改行されるのか、お使いのブラウザで確認してみましょう。<br />
<br />
https://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html<br />
<br />
https://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html<br />
<br />
https://www.example.com/aaaaa_aaaaa/012345-6789/xxxxx_xxxxx.html<br />
</div>
表示確認
text_sample01 [word-wrap: normal;]
長いURLを記述した際どのように改行されるのか、お使いのブラウザで確認してみましょう。
https://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html
https://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html
https://www.example.com/aaaaa_aaaaa/012345-6789/xxxxx_xxxxx.html
長いURLを記述した際どのように改行されるのか、お使いのブラウザで確認してみましょう。
https://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html
https://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html
https://www.example.com/aaaaa_aaaaa/012345-6789/xxxxx_xxxxx.html
text_sample02 [word-wrap: break-word;]
長いURLを記述した際どのように改行されるのか、お使いのブラウザで確認してみましょう。
https://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html
https://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html
https://www.example.com/aaaaa_aaaaa/012345-6789/xxxxx_xxxxx.html
長いURLを記述した際どのように改行されるのか、お使いのブラウザで確認してみましょう。
https://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html
https://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html
https://www.example.com/aaaaa_aaaaa/012345-6789/xxxxx_xxxxx.html
word-wrapに関連するCSSプロパティ
| 文字揃え・段落の振る舞い | |
|---|---|
| direction | 文字表記の方向（左右）を指定する |
| letter-spacing | 文字の間隔を指定する |
| line-break | 要素内での行末や行頭の禁則処理の厳密さを指定する |
| line-height | 行の高さを指定する |
| unicode-bidi | 文字表記の方向（左右）を指定する |
| white-space | テキスト内の空白、タブ、改行の表示の仕方を指定する |
| word-break | 文章の改行の仕方について指定する |
| word-spacing | 単語の間隔を指定する |
| word-wrap | 単語の途中における改行処理の仕方を指定する |
| writing-mode | 文字表記の方向（縦横）を指定する |