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

エ・ビスコム・テック・ラボ
2008-10-29 18:07:01
  • このエントリーをはてなブックマークに追加

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

 とはいえ、レイアウトスペースよりも横幅が長い単語を使う機会はほとんどないだろう。問題が発生する確率が高いのは、長い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での表示
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]