2008年6月2日

jQueryで長いURLやメールアドレスを折り返して表示する

こんにちは、笹亀です。
MacBookを購入して１ヶ月経ち、操作やアプリケーションなどにも慣れてきたのですが、先週の火曜日になにもしていないのに、液晶に謎の線が現れ、故障してしまいました。先週の金曜日に業者に無償修理に出していたのですが、本日MacBookの液晶が新品に変わって戻ってきました。Macの修理の対応の早さに驚きました。ありがたいことです＾＾

Firefoxでは、URLやメールアドレスなどの長い半角英数字をtableタグのtdタグなどに入れた場合に折り返して表示することができずに重なって表示されていまう場合があります。先日、Firefoxの上記の仕様でデザインが崩れると報告をいただいた際に対応した方法をご紹介したいとおもいます。

以前のブログでご紹介した通り（http://blog.asial.co.jp/202）、IEやSafariでの半角英数字のCSSを使用して自動折り返しを行うことは可能でしたが、FirefoxではCSSでの自動折り返しを行うことができません。しかし、この問題はFirefoxの2.0での問題で、近いうちに公開されるFirefox3.0では折り返すことができる仕様になるみたいです。しばらくはFirefox2.0の対応も必ず必要になると思います。

Firefox2.0今回はjQueryのプラグイン（jquery.linkwrapper）があるということを教えてもらい、こちらを使用して対応をさせていただきました。使用方法はとても簡単で、jQueryとプラグインを読み込み、設定したいclass名を指定するだけです。

まずは、jQueryはこちらより（http://jquery.com/）、プラグインはこちらより（http://cl.pocari.org/2008-02-03-1.html）ダウンロードしてください。

実際に下記のようにHTMLを記述して確認してみます。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>linkwrapper.jsのサンプル</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.linkwrapper-1.0.3.js"></script>
<script type="text/javascript">
// <![CDATA[
$(function() {
  // オプションを指定する場合
  $('a.link').linkwrapper();
  $('a.link1').linkwrapper({ pattern: '(\\.|\\_)' });
});
// ]]>
</script>
<style type="text/css">
<!--
p.box {
  padding: 10px;
  width: 100px;
  border: 1px solid #000;
  color: #000;
  background-color: #f5f5f5;
}
-->
</style>
</head>
<body>
■設定を反映しない場合
<p class="box">
<a href="mailto:hogehogehogehogehoge@****.co.jp">
hogehogehogehogehoge@****.co.jp
</a>
</p>
■設定を反映した場合(区切り文字のオプションの指定なし)
<p class="box">
<a href="mailto:hogehogehogehogehoge@****.co.jp" class="link">
hogehogehogehogehoge@****.co.jp
</a>
</p>
■設定を反映した場合(区切り文字のオプションの指定あり)
<p class="box">
<a href="mailto:hogehogehogehogehoge@****.co.jp" class="link1">
hoge.hoge.hoge.hoge_hoge@****.co.jp
</a>
</p>
</body>
</html>