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プロパティ
| 文字揃え・段落の振る舞い | |
|---|---|
| baseline-shift | 優先するベースラインを指定し直す |
| direction | 文字表記の方向（左右）を指定する |
| drop-initial-after-adjust | 頭文字の第一接続点の揃え位置を指定する |
| drop-initial-after-align | 頭文字の第一接続点の揃えラインを指定する |
| drop-initial-before-adjust | 頭文字の第二接続点の揃え位置を指定する |
| drop-initial-before-align | 頭文字の第二接続点の揃えラインを指定する |
| drop-initial-size | 頭文字のサイズを指定する |
| drop-initial-value | 頭文字を何行分にするかを指定する |
| letter-spacing | 文字の間隔を指定する |
| line-break | 要素内での行末や行頭の禁則処理の厳密さを指定する |
| line-height | 行の高さを指定する |
| line-stacking | 行ボックスに関する指定をまとめて行う |
| line-stacking-ruby | 行ボックスを重ねる際のルビの扱いを指定する |
| line-stacking-shift | 文字のベースラインを考慮するかどうかを指定する |
| unicode-bidi | 文字表記の方向（左右）を指定する |
| white-space | テキスト内の空白、タブ、改行の表示の仕方を指定する |
| word-break | 文章の改行の仕方について指定する |
| word-spacing | 単語の間隔を指定する |
| word-wrap | 単語の途中における改行処理の仕方を指定する |
| writing-mode | 文字表記の方向（縦横）を指定する |