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

エ・ビスコム・テック・ラボ
2008/10/29 18:07

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

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

　とはいえ、レイアウトスペースよりも横幅が長い単語を使う機会はほとんどないだろう。問題が発生する確率が高いのは、長い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での表示 Internet Explorerでの表示
Safariでの表示 Safariでの表示
Chromeでの表示 Chromeでの表示

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

Firefox 3での表示 Firefox 3での表示

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

Operaでの表示 Operaでの表示
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
ブラウザ セキュリティ javascript HTML Opera Windows Apple Internet Explorer Windows 7 Mozilla Flash リファレンス Ajax Windows XP 小技 Database Firefox 3 Safari php java クラウド データベース CSS Windows Vista 仮想化 Microsoft 脆弱性 Webサービス Tips RIA Webデザイン Mac OS X WebKit Off Topic アプリケーション オープンソース iPhone 3G ソフトウェア開発 開発環境 UI Chrome OS linux iPhone Firefox インストール プログラミング言語 マイクロソフト iPod touch google
  • 話題のタグを見る »