人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLについて質問します。

テーブルをくんでいるのですが、その上でwidth="100"などして固定しています。
しかし、縦幅は固定していません。

全角文字は横幅が固定されて縦がのびていい感じなのですが、半角英字などは横幅が固定されず、そのままのびてしまいます。

なにか良い方法はないでしょうか?

●質問者: zachouR
●カテゴリ:インターネット ウェブ制作
✍キーワード:TM
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● steel-plate
●20ポイント

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-break-スタイルシートリファレンス

<wbr> - 単語の区切り

◎質問者からの返答

なるほど、同一単語とみなすのですね。

途中で<wbr>は入れることができません。

うーん、どうしよう。


2 ● まきのっぴ
●20ポイント

word-wrap: break-word; を指定します。

http://www.htmq.com/style/word-wrap.shtml

ただしこれが有効に働くのは Internet Explorer のみです。

◎質問者からの返答

これはいいですね!

しかし、Firefoxでは動かないんですね。

なにか、よい方法はないかな、、、。


3 ● sagamihara-jiro
●20ポイント

英字が改行されずに横に続くという意味でしょうか。

英語などが単語の途中で別れてしまわないように、一続きの半角文字は途中で改行されないようになっています。スペースを挟んでください。

http://q.hatena.ne.jp/

◎質問者からの返答

半角はある事情で入れることができません。

すいません。


4 ● wizemperor
●20ポイント
<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;">

のようにスクロールテーブルにすれば解決すると思います。

http://q.hatena.ne.jp/answer

◎質問者からの返答

うまくいきました!

ありがとうございます。

僕はAdobe GoLiveで組んでいるのですが、プレビューの状態ではうまく作動しないようです。

しかし、実際にブラウザでみてみるときちんと動作していました。


5 ● Marine-Blue
●20ポイント

JavaScriptを埋め込むという方法もあるようです。下のソースを書き換えずに住むので楽チンですよ。

http://www.koikikukan.com/archives/2005/08/04-235647.php


あとついでに言っとくとOperaはCtrl+F11で強制折り返しが利きます。

◎質問者からの返答

ありがとうございます。

Ctrl+F11 試してみますね。

しかし、どうして半角だとどこまでもいく設定なのでしょう。

個人的に不便だと思うのですが、、、。



●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ