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将其保持为单行，并溢出：隐藏以隐藏溢出期间。

问题是这不起作用 - NOWRAP肯定不会将它保留在一行上，而溢出并没有隐藏任何东西 - 是否有一种方法可以实现这一点，最好是使用表格，使用ASP.NET /的任意组合CSS /或JS / jQuery？

谢谢！

Answer 1

我使用（重复）点的背景图像和repeat-x。然后做两个div：

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

编辑：

在给出更彻底的思考之后，你确实可以设置溢出：隐藏和附加（硬编码或通过JS）点，直到达到所需的长度。硬编码（读取：css'ing）div / td的高度/无论什么会使它只有“一行” - 但是它会限制你只使用一行作为你的“Link #n”文本。

Answer 2

HTML Nowrap已被弃用。 Css white-space:nowrap;就是你想要做的。

Answer 3

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
}

Answer 4

试试这个：

<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>

如何在包含动态项目的表格中实现具有句点的书籍式索引？

4 个答案: