HTML/CSS——省略标志左侧的面包屑答案

【问题标题】：HTML/CSS -- Elipsise Breadcrumbs to the Left of a LogoHTML/CSS——省略标志左侧的面包屑
【发布时间】：2012-08-28 03:28:21
【问题描述】：

我正在尝试在徽标旁边放置一个面包屑栏。该网站应该从 1000px 缩放到 400px，因此如果我可以省略面包屑以防它们太长（开始新行没有多大意义，因为面包屑文本与徽标水平对齐）文本）。

想要的 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> 设置固定宽度？

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

【问题讨论】：

如果您设置的 max-width 小于您的 min-width，您定义的现有 CSS 规则是否不会在所需的点创建省略号？
没那么多，可悲的是......似乎只直接影响父元素内的东西。

标签： html css overflow ellipsis

【解决方案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/

【讨论】：