2007年5月7日
CSSでブラウザごとに自動改行を試してみました
こんばんは、笹亀です。
GWはあっというまに終わってしまい、
今日から仕事が始まっている方も多いとおもいます。
GW中の4月30日に新宿でうろうろしていたら、
アルタ前でavrilの新宿ゲリラライブにたまたま遭遇したことが一番の思い出でした。
本物はお人形みたいでした＾＾
さて、本日はCSSでテーブルなどのサイズに合わせて、
自動改行を行わせるものをパターンで比べてみました。
今回、使用したブラウザはIE6.0とFirefox2.0系です。
まずは、日本語（2バイト）に関しては、テーブルなどのサイズに合わせて自動で改行が行われるかを確認します。
下記のようにテスト用のHTMLを作成しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>テスト</title>
<style type="text/css">
#test table{width:150px;background-color:#00FFFF;word-break:break-all;word-wrap: break-word;}
#test td{font-size:x-small;background-color: #FFFFFF;}
</style>
</head>
<body>
<div id="test">
<table>
<tr>
<td>自動折り返しテスト中</td>
</tr>
<tr>
<td>あかさあかさあかさあかさあかさあかさあかさあかさあかさあかさあかさあかさあかさあかさ</td>
</tr>
</table>
</div>
</body>
</html>
上記をIEとfirefoxで実行すると・・
日本語だけのものはうまくテーブルのサイズを判断して、
思ったとおりに改行できました。
IEの場合は下記のスタイル指定で単語の途中で改行をさせることができます。
word-break:break-all;
word-wrap: break-word;
次に上記のHTMLに半角数字（1バイト）のみのテーブルに変更しました。
・
・
<div id="test">
<table>
<tr>
<td>自動折り返しテスト中</td>
</tr>
<tr>
<td>012345678901234567890123456789012345678901234567890・・・</td>
</tr>
</table>
</div>
・
・
IEでは先ほど指定しておいたスタイルが有効になっているため、
半角数字でもサイズに合わせて自動改行できました。
Firefoxの場合では、半角英数字が1行で表示されてしまっています。
上記の改行はIE独自のスタイルなので、
当然、Firefoxではサイズを判断して改行をしてくれません。
FireFoxで、半角英数字のみの文字列をサイズに合わせて自動で改行をさせることはできないものでしょうか・・
ちなみに、日本語（2バイト）と半角英数字を混合させた文字列の場合はうまく改行を行ってくれました。
FireFoxで上記問題の解決方法をご存知でしたら、
是非、教えてください。
