長い単語やURLの改行をコントロールするword-wrapプロパティ

最新特集【一覧】

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

　欧文のテキストは半角スペースの位置で改行される。そのため、半角スペースが入らない長い単語は途中で改行されることがない。レイアウトスペースの横幅が狭い場合、長い単語ははみ出してしまい、レイアウトを崩す原因となる。

　とはいえ、レイアウトスペースよりも横幅が長い単語を使う機会はほとんどないだろう。問題が発生する確率が高いのは、長いURLを表記した場合だ。

　URLは半角スペースを含まないので、ブラウザにとっては1つの長い単語と同じ扱いになる。特に、ブログなどのコメントで長いURLを記述されると、制作者の予期しないところでレイアウトが崩れる原因になってしまう。

　そこで今回は、ブラウザごとのURLの改行処理の違いを確認して、長い単語やURLの改行をコントロールするword-wrapプロパティを紹介したい。

ブラウザごとのURLの改行処理

　次のサンプルは、横幅が300ピクセルのボックス内に長い単語やURLを記述したものだ。上から順番に、

1. 長い単語を含んだ欧文テキスト
2. 「/（スラッシュ）」を含んだURL
3. 「-（ハイフン）」を含んだURL
4. 「_（アンダーライン）」を含んだURL

　となっている。

サンプル

※ブラウザで表示を確認する

　このサンプルをInternet ExplorerやSafari、Chromeで表示すると3の「-（ハイフン）」の位置には改行が入るが、「/（スラッシュ）」や「_（アンダーライン）」の位置には改行が入らないことがわかる。

Internet Explorerでの表示

Safariでの表示

Chromeでの表示

　一方、Firefoxの場合はFirefox 2まで長い単語やURLには改行が入らなかった。しかし、Firefox 3からは「/（スラッシュ）」と「-（ハイフン）」の位置に改行が入るようになっている。

Firefox 3での表示

　OperaではFirefox 3と同じように「/（スラッシュ）」と「-（ハイフン）」の位置に改行が入る。

Operaでの表示