半角文字で構成したリンクテキストが、それを置いているDivやテーブルで設定しているwidthの幅よりも長くなった場合、折り返されずに領域をはみ出して一行で表示されてしまいます。


↓このように、URLのリンクテキストを表現したいと思っているのですが、何とかdivタグの中で、設定した横幅の中で折り返して表示する方法はありませんでしょうか?
<div style="width:50px;background-color:#AAA;"><a href="http://www.hatena.ne.jp/">http://www.hatena.ne.jp/</a></div>

↓このように、全角文字のみで構成したリンクテキストと同じように、半角文字のリンクテキストでも、50pxの領域内で折返して表示されるようにしたいです。
<div style="width:50px;background-color:#AAA;"><a href="http://www.hatena.ne.jp/">http://www.hatena.ne.jp/</a></div>

これは仕様上のバグと言う話を聞いた事もありますが、何らかの方法があれば、ご教授お願いします。
また、実現が出来ない場合は、それらの理由等が解説されたページ等をご紹介頂けると嬉しいです。

回答の条件
  • 1人2回まで
  • 登録:2006/03/16 02:12:25
  • 終了:2006/03/23 02:15:03

回答(2件)

id:izayoimizuki No.1

izayoimizuki回答回数302ベストアンサー獲得回数02006/03/16 07:08:05

ポイント34pt

基本的に半角スペースを含むところで折り返しています。

そのためURIなど半角スペースを含まない文字列ではうまく折り返しがされません。

簡単な解決策は<wbr />を入れることです。

そこが改行の候補となり適切な長さで折り返されます。

或いは半角スペースを入れても良いです。

id:shin-b

ご回答ありがとうございます。

質問が言葉足らずで申し訳無いのですが、リンクテキスト部分はMTの<$MTArchiveLink$>タグを使用して表示させるつもりなので、半角スペース等を入れる事が出来ず、解決する事が出来ないのです。

折返しをせずに、リンクテキストを指定した文字数以降を途中で省略して表示する方法等があれば、それでも良いのですが・・・。

2006/03/16 08:38:08
id:dungeon-master No.2

dungeon-master回答回数571ベストアンサー獲得回数402006/03/16 11:43:18

ポイント33pt

MTはおいといて、スタイルシートの話に絞っていきます。

ご質問にある表示に一番近いのは、

<div style="width:50px;background-color:#AAA;word-break:break-all;">

のように、word-break:break-all;で単語の途中でも折り返す方法です。

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

ただし、IE限定です。


多くのブラウザがサポートしている指定となると、overflow:scroll;を使って

はみ出た部分は横スクロールなどをさせる方法が考えられます。

(スクロールバーの領域を考慮する必要があります。)

後、overflow:hidden;の指定で、はみ出た部分を非表示にすることもできます。

http://www.htmq.com/style/overflow.shtml

これらの場合は

<A href=~ title="gonyo…gonyo">gonyo…gonyo</a>

のようにTITLEをつけておく(IEではマウスをリンクに合わせるとTipBoxがでる)

といった仕組みも併用した方が親切です。


結局今のところ、折り返しの体裁が乱れないようにするためには、URLを

直に表示させないのが一番なのですが…

id:shin-b

ご回答ありがとうございます。

なるほど、省略する場合は「overflow:hidden;」が便利ですね。

もうしばらく募集してみて、最適な方法が出なければ、これを採用させて頂こうと思います。

2006/03/16 13:38:44

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません