長いURLを強制改行（折り返し）するJavascript
070228
こんにちは、なかわけです。
今日は仕事中にすごいいい情報を手に入れました。今日1日の価値はかなり高いです。
ウェブデザイナーのほとんどの人が悩んだことがあるんじゃないでしょうか。長いURLを表示したときにレイアウトが崩れてしまう症状。ほぼ全てのブラウザでレイアウトを崩す長いURLですが、今日イチバンいいと思われる回避策を発見しました。
行う作業はIE用の処理とそれ以外のブラウザ（Gecko系）用の処理の2つです。
まず、IE用の処理としてIE独自のCSSプロパティ word-break を設定します。html全体もしくは適応箇所に
word-break:break-all;
を設定すれば、親要素の幅内で自動的に改行（折り返し）してくれます。（IE独自のCSSプロパティというところがシャクな気がしますがこれがもっとも簡単安定したものと思います）
次にGecko系用の処理ですが、これがすごい！サーバにアップしてリンクするだけでできちゃうJavascriptがあったんです。書いてくれた人に感謝。サンプルも公開されてます。詳しい分かりやすい説明は小粋空間さんのページに紹介されてますので簡単に説明しますが、url_breaker_plus.user.jsというJavascriptファイルをダウンロード、自分のサーバにアップロードして適応したいページの<html>の直前に
<script src="url_breaker_plus.user.js" type="text/javascript"> </script>
と挿入するだけ。とても簡単。
ただ1点うまくケースを発見しました。それは、長いURLが<table>内に含まれるときにこのJavascriptが無効化されてしまいます。たぶん、table要素が特殊なためJavascriptでうまく処理されないものと思われます。
なかわけが考えた対処法としましては、長いURLの親要素の<td>に
display:block;
とスタイルをつけてあげればうまく処理されます。
この今日の発見によりいままで悩んでたレイアウト崩れが全て解決されました。あーうれし。あー今日はもう満足。
コメント (0)