テーブルを作成するとき、せっかく幅を指定しても、半角英数字を入力すると、意図せず、テーブル幅が広がってしまう場合があります。

自分で入力するぶんには、改行で制御できますが、登録フォームなどユーザーに入力してもらうさい、いたずらで英数字だけの文字を長々と入力されると、テーブルにとどまらず、ページ全体のレイアウトが崩れることが起こりえます。

CSSのプロパティにテーブル内の自動改行や禁則処理をコントロールする「word-break」がありますが、現在は、IE5以降、Safari3以降、Google Chromeなど一部のブラウザしかサポートしていません。

JavaScriptライブラリの「wordBeak.js」を利用すれば、Firefox3やOpera9.5などword-breakプロパティに対応していないブラウザでも同じ機能を実現することができます。

まず、配布元から「wordBrak.js」をダウンロード。

サーバ上の任意のフォルダにアップします。

利用したいページのhead要素内にscript要素を以下のように記述し、

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

「wordBreak.js」を読み込みます。

table要素に「class=”wordBreak”」を指定するだけで、テーブルの拡張を防ぐことができます。

【wordBreak.jsを利用しない場合】

【wordBreak.jsを利用した場合】

出典：現場のプロから学ぶXHTML+CSS
↑
かゆいところに手がとどく目から鱗のテクニック満載。おススメです。