アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

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


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

以前のブログでご紹介した通り(http://blog.asial.co.jp/202)、IESafariでの半角英数字の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>



実際に作成したサンプルをご覧になりたいかたは下記のリンクで確認できます。
SAMPLE

今回は、こちら(http://cl.pocari.org/)のサイトを参考に書かせていただきました。
便利に使わせていただきました。有り難うございました。

jQueryはとても便利ですね(いまさら)
昔からprototypeをよく使用していましたが、jQueryも充実していてよくなっているみたいで悩みどころです^^;