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

半角文字で構成したリンクテキストが、それを置いている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>

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

●質問者: shin-b
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:URL タグ テキスト バグ リンク
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● izayoimizuki
●34ポイント

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

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

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

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

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

◎質問者からの返答

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

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

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


2 ● dungeon-master
●33ポイント

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を

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

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



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