2

我正在尝试在徽标旁边放置一个面包屑栏。该网站应该从 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>and设置固定宽度<a>？

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

4

1 回答 1

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

编辑：

如果您希望它的宽度至少为 400 像素，则可以使用您拥有的代码。问题是文本不够长。

如果你使用...

<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/ ​</p>

于 2012-09-03T12:53:24.777 回答