テーブルをくんでいるのですが、その上でwidth="100"などして固定しています。
しかし、縦幅は固定していません。
全角文字は横幅が固定されて縦がのびていい感じなのですが、半角英字などは横幅が固定されず、そのままのびてしまいます。
なにか良い方法はないでしょうか?
htmlでは半角英数字が連続するとそれは単語とみなされてしまいます。また、htmlでは単語の途中で改行を入れることは行いませんので、いくらwidth属性で幅を規定していても改行されずに広がってしまうというわけです。
これをhtmlで回避する方法は残念ながらないようです。
cssではword-breakでbreak-allを指定することで、改行されるようになるようですが、これはIEのみの使用のようで他のブラウザでは動かないようです。以下のように記述するとIEでは改行されます。
>|html|
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
||<
また、自動ではなく改行する場所がわかっているのであれば、<wbr>というタグがありますので、これで改行することも可能です。以下のソースでは<wbr>が入っている場所で幅が規定値を超えていた場合は改行されます。
>|html|
aaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa<wbr>aaaaaaa
||<
IEに限定してしまうのであればCSSでの記述もありですが、そのようなつくりはあまり好まれませんので、半角英数字を使わないように変更するのが無難でしょう
word-wrap: break-word; を指定します。
http://www.htmq.com/style/word-wrap.shtml
ただしこれが有効に働くのは Internet Explorer のみです。
これはいいですね!
しかし、Firefoxでは動かないんですね。
なにか、よい方法はないかな、、、。
英字が改行されずに横に続くという意味でしょうか。
英語などが単語の途中で別れてしまわないように、一続きの半角文字は途中で改行されないようになっています。スペースを挟んでください。
半角はある事情で入れることができません。
すいません。
<table width="100px" style="word-break:break-all; word-wrap: break-word;">
とすればいけます。ただしIE限定です。
Firefoxなどでは半角英数字が連続すると折り返されませんので、文字の間に半角スペースをいれるか、
<table style="word-break:break-all; word-wrap: break-word; width: 100px; overflow: auto;">
のようにスクロールテーブルにすれば解決すると思います。
うまくいきました!
ありがとうございます。
僕はAdobe GoLiveで組んでいるのですが、プレビューの状態ではうまく作動しないようです。
しかし、実際にブラウザでみてみるときちんと動作していました。
JavaScriptを埋め込むという方法もあるようです。下のソースを書き換えずに住むので楽チンですよ。
http://www.koikikukan.com/archives/2005/08/04-235647.php
あとついでに言っとくとOperaはCtrl+F11で強制折り返しが利きます。
ありがとうございます。
Ctrl+F11 試してみますね。
しかし、どうして半角だとどこまでもいく設定なのでしょう。
個人的に不便だと思うのですが、、、。
なるほど、同一単語とみなすのですね。
途中で<wbr>は入れることができません。
うーん、どうしよう。