ウェブランサー

word-wrap - 単語の途中での改行処理の仕方を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 する

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 />
http://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html<br />
<br />
http://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html<br />
<br />
http://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 />
http://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html<br />
<br />
http://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html<br />
<br />
http://www.example.com/aaaaa_aaaaa/012345-6789/xxxxx_xxxxx.html<br />
</div>
表示確認
text_sample01 [word-wrap: normal;]
長いURLを記述した際どのように改行されるのか、お使いのブラウザで確認してみましょう。

http://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html

http://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html

http://www.example.com/aaaaa_aaaaa/012345-6789/xxxxx_xxxxx.html
text_sample02 [word-wrap: break-word;]
長いURLを記述した際どのように改行されるのか、お使いのブラウザで確認してみましょう。

http://www.example.com/aaaaaaaaaa/0123456789/xxxxxxxxxx.html

http://www.example.com/aaaaa-aaaaa/012345-6789/xxxxx-xxxxx.html

http://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 文字表記の方向(縦横)を指定する