サーバーまわりのこと

半角英数字や記号がボックスから、はみ出る現象を解消する。

http://xxx.xxx.comという普通のアドレス……もとい、半角英数字の羅列。

「ー」とか、「!」とかの記号。

ブログに勢いあまって、「やぁーーーー〜〜〜〜〜!!!」とか、長ったらしいアドレスとかを表記すると、CSSのボックスからはみ出してしまう現象があります。

そういった文字列は、どうも一つの記号として捉えられてしまうみたいで、改行を間に入れない仕様になってるんです。

これ、各ブラウザで普通に起きることらしいです。

が、IEだけはバグで、折り返して普通に表示してしまう……らしい。つか、それでいいんだけどねIEは。

すぐ出来る対応策

そこで普通なら、

word-break:break-all;

というCSSを使ってやると、端で折り返してくれるようになります……Firefox(Operaも??)以外では。

「word-break」は、CSS3で採用するかどうかって感じのものでして、現在はIEが独自に取り入れてるだけみたいです。その流れで、Google Chromeさんとかも採用してるみたい。

ただ、Firefoxには通用しない。

そこで!

htmlとcssが出来る僕が考えても思いつかなかったので、検索。

Javascriptで解消する!

Javascriptでやってしまおうという企画が水面下で進んで……るかどうかは知りませんが、ありがたいことにありました。Javascriptでやってしまう方法が!

試してみたので、僕なりの補足事項を後で書きますが、とりあえずサイト様を紹介。

『IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。』

引用元:FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」

ここで紹介されてるものは、TABLEタグのみに使用出来るものみたいです。僕は、PHPは出来てもJavascriptはさっぱりなので、参考にして自作とか格好いいことはできません(汗)

そこでもう少し検索してみました。

word-break:break-allをFirefox等でも実現するjavascript(jQuery)

こちらに、TABLEタグ以外でも使えるものを、自作している方がおりました。

設定方法

上記サイトより、javascriptファイルをダウンロード。

そして、もう一つ。

javascriptはからきしなので、「jQueryってライブラリが必要」とあるのですが、jQueryって何ぞや?って感じでしたが、以下から、

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Download jQueryの、Current Releaseのうち、Minifiedをダウンロード。

この二つの、javascriptファイルを対象のhtmlにて、

<script type="text/javascript" src="http://○○○/jquery.js"></script>
<script type="text/javascript" src="http://○○○/wordbreak.js"></script>

こんな感じで、<head>〜</head>の間に追記します。

はみ出させたくないボックスに、

class="wordbreak"
を指定してやれば適応できます。

いうなればスタイルシートにも、

.wordbreak {
word-break: break-all;
}

と記述しておきましょう、これで大丈夫なはずです。





【webデザインの最新記事】
posted by ありす | Comment(0) | webデザイン | このブログの読者になる | 更新情報をチェックする | edit
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。