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

このエントリーをはてなブックマークに追加

IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。

そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。

使い方

ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。

<script type="text/javascript" src="./wordBreak.js"></script>

word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追加してください。

<table class="wordBreak">

サンプル

Firefoxは3以上のバージョンを対象にしています。

MITライセンスで公開しますのでご自由にお使いください。

バグ、不具合はコメント欄よりお願いいたします。

修正情報

関連エントリー

透過pngを扱うalphafilter.jsライブラリ
ブロックレベル要素の高さを揃えるheightLine.js
footerをウィンドウ下部に固定する『footerFixed.js』
ie以外でもクリップボードが使えるsetClipboard.js
ページ内リンクをスマートにするsmoothScroll.js

スポンサードリンク

«CSS Niteビギナーズ | メイン | [リクリ]第11回 attrによる属性値の制御 jQueryによるJavaScript入門»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1015
トラックバック内容
» ブログ改造-11(半角文字列の改行) from 消波ブログ
半角文字列の改行 ときどき、サイドバーが記事の上や下に移動して、レイアウトが崩れてるブログとか見かけますよね。 URLなど、長い半角英数文字列の書き込みが...
コメント

wordBreak.js。痒い所に手が届く便利なライブラリだと思います。

使用してみましたところ、
Firefox2で機能しないようですが
Firefox3以上が対応となるのでしょうか?
特にバージョンは書いていなかったと思いますが、
お答えいただければ幸いです。

投稿者:tanahasi | 2008年9月19日 15:33

はじめまして。
これ、とても便利ですね。
ほとんどの環境で思い通りの表示が可能になりそうです。
早速使わせていただくつもりですが、少しだけ改変させていただこうと思います。

実は、div要素の中にある文字列に改行を強制させたいと思い、検索でこのページを見つけたのですが、あいにく「wordBreak.js」はtableの中にある文字列にのみ、改行を強制するようです。
tableの中に<div>~</div>を入れて使おうかとも思ったのですが、ためしに「wordBreak.js」の中にある"table"の文字列を全部"div"に書き換えたら、div要素の中の文字列も改行を強制できました。
tableの場合も、<table>~</table>を<div class="wordBreak">~</div>で囲ってやれば、同様に改行を強制できますので、この方がより一般化できるのではと思います。

同様に、「wordBreak.js」の中の"table"という文字列を全部"span"に書き換えても、spanの中の文字列の改行を強制できました。
掲示板等の不特定多数が書き込みする場合は、書き込み全体に改行を強制させたいですが、自らが運営するサイトなどでは、文字数が長い単語だけに改行を強制して、他の単語は単語の区切りで自然に改行できた方がいいと思うのです。
この場合、文字数が長い単語だけ<span class="wordBreak">~</span>で囲ってやれば、実現できそうです。

その両方を同時に実現するために、「wordBreak.js」の14行目~52行目を53行目以降にコピーし、14~52行の"table"の文字列を全部"div"に書き換え、53行目以降の"table"の文字列を全部"span"に書き換えてみました。
ブロックレベル要素の中身全体に改行を強制したい場合は、そのブロックレベル要素を<div class="wordBreak">~</div>で囲み、インライン要素に改行を強制したい場合は、そのインライン要素を<span class="wordBreak">~</span>で囲むという使い方が出来ます。

投稿者:テトラポッド | 2008年10月15日 20:56

>tanahasiさん

コメントありがとうございます。
対応はFirefox3以上になります。

投稿者:西畑一馬 | 2008年10月23日 00:20

はじめまして。これは大変便利ですね。

あと気になったことですが、上でテトラポッドさんが発言されてますがtableだけではなく、そのほかのタグにも使用できるように汎用性を高めるなら、
document.getElementsByTagName("table");を、
document.getElementsByTagName("*");としたら如何でしょうか?

処理は遅くなるとは思いますがタグの制限無く使用できると思います。

投稿者:d | 2008年10月25日 14:11

>dさん

コメントありがとうございます。

配布しているライブラリに関しては、「どのようなサイト」で「どのような使われ方されるか」がわからないという前提で公開していますので、tableという制限を設けています。(一番ニーズがあると思われるので)

MITライセンスで公開していますので、汎用性が必要な方はご自由に改変してご利用いただけたらと。

投稿者:西畑一馬 | 2008年10月25日 14:45

大変便利で早速使ってみました。ありがとうございます

ユニバーサルセレクタに書き換えて、
必要な部分だけ  class="wordBreak"  を入れてやれば
いい感じに改行しますね

ただ、class="wordBreak" を入れたBox内の要素に
自動的に上下にマージンが入ってしまうようです

投稿者:BlueB | 2009年6月 4日 14:08

>BlueBさん

ありがとうございます。
上下マージンのバグ修正しましたので、最新のバージョンで試してみていただけないでしょうか?

投稿者:西畑一馬 | 2009年6月 5日 17:21

初めまして。大変便利そうなスクリプトですね!

しかしサンプルページを表示してみたところ、
Firefox3ではうまくいくのですが、
Opera9.64では折り返してくれませんでした。
因みにOpera 10 betaでも駄目でした(こっちはβだから仕方ないかな)。

私の環境だけでしょうか;
一応御報告まで。

投稿者:rinko | 2009年6月 9日 02:31

先刻の投稿を訂正します。
私がOperaのJSを切っていたのが悪かったようです。
Opera9.64でもOpera 10 betaでもきちんと表示されます。
間違った投稿をして、申し訳ありませんでした。

投稿者:rinko | 2009年6月 9日 02:38

ありがとうございます!!
このサンプルプログラムで、Firefox対応できました!
ありがとうございました。

テトラポットさんにも感謝です。
DIVとして扱う方法で使いました。

投稿者:なべ | 2009年6月29日 20:41

FireFoxでどうにか「word-break:break-all」ができないかと、捜し回ってたどり着きました。

実現方法を提供していただき、大変感謝しております。

さっそく設置してその動作に感動していたところです…が、ひとつ気になるところがありました。

このクラスで指定された範囲内の文字列の検索ができなくなりますね。
これができるとさらに完璧なのですが、どうでしょうか?

投稿者:ハットリ | 2009年8月10日 19:57

>ハットリさん

コメントありがとうございます。
wordBreak.jsは実装方法の問題でご要望の対応は難しいです。
すみません。

投稿者:西畑一馬 | 2009年8月22日 12:33

>西畑さん

返信が遅れてしまいすみません。
wordBreak.jsにつきましては、FireFoxでbreak-allを実現していただけただけでも、大変素晴らしく、重宝させていただいております。
こちらこそ、ぶしつけな要望すみませんでした。

つくっていただいたことに感謝しております。

投稿者:ハットリ | 2009年9月 7日 11:09

ありがとうございました。
とても助かりました。

投稿者:うえだ | 2010年1月22日 17:16

どのブラウザでもサポートされていて大変便利なのですが、wordBreak.jsを適用したWebページの文字をコピーしてメモ帳などに貼ると半角でもないスペースが入っており、そこからコピペした文字が単語として認識されません。

投稿者:yasu | 2011年1月24日 00:42
コメントを投稿