長い単語や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にログインしてコメントする

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