ダイナミックアイテムのテーブルにピリオドを含むブックスタイルのインデックスを作成するにはどうすればよいですか？

Question

私は矢印で終わる末尾のピリオドを持つメニューを作りたいと思っています。これは本の索引にあるものと似ています（実際の名前は私をエスケープします！）。したがって、たとえば、私は（ASP.NETを経由して）動的にリンクを生成できるようにしたいと、このような形式で出力して：私は等幅を使用することはできません

• ：

  Link #1 ............ >> 
  Link #2 ............ >> 
  Really Long Link ... >> 
  

  この点に注意してくださいフォント

• 私はリンクが、それらは動的にユーザー

私の現在のアプローチはこれですによって作成されるかわからない：

<tr><td nowrap style='overflow: hidden; width: 400px;'>Link 1</td><td> >> </td></tr> 

... "..."を400pxより大きい長さに追加し、NOWRAPを使用して1行にし、overflow：hiddenを使用して溢れている期間を隠すことを目標にしています。

これは問題ではありません - NOWRAPは間違いなく1行に保持しており、オーバーフローは何も隠していません - これを実現するためのアプローチは、ASP.NETの任意の組み合わせ/ CSS /またはJS/jQuery？

ありがとうございます！

Answer 1

私は（繰り返し）ドットとrepeat-xの背景イメージを使用したいと思います。所望の長さを持つまで（どちらかのハードでコーディングされたか、JS経由）ドットを非表示で追加：

<div style="float: left; background-image: url('url'); background-repeat: repeat-x; width: 480px;"> 
Link #1 
</div> 
<div style="float: right"> 
&gt;&gt; 
</div> 

EDIT：

それをより徹底した思想を与えた後、あなたが実際に設定することができオーバーフロー次に、2つのdivを作ります達しました。 div/td /の高さを "1行"にするだけで、ハードコーディング（読み込み：css'ing）できます。ただし、1行だけを "リンク#n"テキストとして使用することに制限されます。

Answer 2

HTML Nowrapは廃止されました。 Css white-space:nowrap;はあなたがしたいことです。

Answer 3

これを試してみてください：

<table width="100%"> 
<tr><td style="position:relative" ><span style="position:absolute; z-index:1px; background-color:White;" >Link 1</span><hr style="border-style:dotted; width:100%" /></td><td width="10px"> >> </td></tr> 
</table> 

Answer 4

http://jsfiddle.net/syJW2/1/

（ご希望の場合またはテーブル）あなたはCSSでリストを使用することができます

：これは、項目のリストを作成します

ul.toc 
{ 
    display: block; 
    position: relative; 
    margin: 0px; 
    padding: 0px; 
} 

ul.toc li:before 
{ 
    content: ">>"; 
    float: right; 
    background: white; 
    position:relative; 
} 
ul.toc li 
{ 
    list-style: none; 
    overflow: hidden; 
    white-space: nowrap; 
} 

（その正常に劣化します）>>は右側に配置されています（背景が白で、ドットが表示されないようになります）...。 ulは、全領域を埋めるためにブロックを表示さ

マークアップのように（自分の好みにマージン/パディングを削除する）：

<ul class="toc"> 
    <li>link 1</li> 
    <li>link 2</li> 
    <li>link 3</li> 
</ul> 

とjQueryコード：

jQuery("ul.toc li").each(function(){ 
    jQuery(this).text(jQuery(this).text() + ".............................................................................................................................................."); 
}); 

または代わり用純粋なCSS/HTMLオプション：（少し複雑になる）

http://jsfiddle.net/syJW2/2/

HTML：

<ul class="toc"> 
    <li><span class="link">link 1</span><span class="dots">&nbsp;</div></li> 
    <li><span class="link">link 2</span><span class="dots">&nbsp;</div></li> 
    <li><span class="link">link 3</span><span class="dots">&nbsp;</div></li> 
</ul> 

とCSS：

ul.toc 
{ 
    display: block; 
    position: relative; 
    margin: 0px; 
    padding: 0px; 
} 

ul.toc li:before 
{ 
    content: ">>"; 
    float: right; 
    margin-left: 4px; 
} 
ul.toc li 
{ 
    list-style: none; 
    overflow: hidden; 
    white-space: nowrap; 
} 

ul.toc li span.link 
{ 
    float: left; 
    margin-right: 4px; 
} 

ul.toc li span.dots 
{ 
    overflow: hidden; 
    border-bottom: 1px dotted black; 
    font-size: 50%; 
    display:block 
}