HTML/CSS——在徽标左侧突出显示面包屑

Question

我正试图在徽标旁边放一个面包屑条。网站应该从1000像素扩展到400像素，因此如果我能省略号面包屑，以防它们太长，那就太好了（开始一行没有多大意义，因为面包屑文本与徽标文本水平对齐）。

所需外观如ASCII艺术：

当所有文本都匹配时：

  /-
  -/
COMPANY    Breadcrumb > Breadcrumb > Breadcrumb

缩小时：

  /-
  -/
COMPANY    Breadcrumb > Breadcru...

我的HTML当前如下所示：

<div>
    <a href="...">
        <img src="logo"/>
    </a>
</div>
<div style="position: absolute; top: 50px; left: 0px; overflow: hidden; text-overflow: ellipsis; min-width: 400px; white-space: nowrap; max-width: 100%;">
    <a href="..." style="margin: 0 0 0 100px;">Top Crumb</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="...">2nd Level Crumb</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="...">3rd Level Crumb</a>
</div>

现在，我如何将省略号应用于最后一个可见的面包屑（而不为每个<span>和<a>设置固定宽度？

（我希望这足够清楚，但我非常乐意回答问题。）

Answer 1

请参阅http://jsfiddle.net/C97kC/

只需移除min-width: 400px

CSS：

#div{
    position: absolute; top: 50px; left: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

HTML:

<div>
    <a href="...">
        <img src="logo"/>
    </a>
</div>
<div id="div">
    <a href="..." style="margin: 0 0 0 100px;">Top Crumb</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="...">2nd Level Crumb</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="...">3rd Level Crumb</a>
</div>​

编辑：

如果你希望它至少有400px的宽度，你可以使用你的代码。问题是文本不够长。

如果您使用。。。

<a href="..." style="margin: 0 0 0 100px;">Top Crumb</a>
<span>&nbsp;&gt;&nbsp;</span>
<a href="...">2nd Level Crumb</a>
<span>&nbsp;&gt;&nbsp;</span>
<a href="...">3rd Level Crumb</a>
<span>&nbsp;&gt;&nbsp;</span>
<a href="...">4rd Level Crumb</a>

你会看到省略号。

演示：http://jsfiddle.net/C97kC/1/​