Question

我见过许多类似的问题，但我找不到的任何问题似乎都能满足我的目标。我的网站上有一些面包屑。目前，HTML看起来像这样：

<div class="breadcrumb">
    <span>Home</span>
    <span>Section</span>
    <span>Subsection</span>
    <span class="last">current page</span>
</div>

我需要做一些事情，我无法弄明白。除最后一个<div>之外的所有内容都应根据<span>中文字的大小水平调整大小。由于面包屑的最终格式看起来像一个截然不同的部分，<span class="last">需要填写从前一个跨度结束到封闭部分结束的剩余空间。

如果封闭视图宽度（最大宽度为960px，但有时更小）太窄而无法看到所有内容，那么最后一次潜水应该越来越小并截断其中的文本（而不是包裹自身）使用类似的东西text-overflow：省略号;。

换句话说：

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Meeting Agenda     ]|

当窗口缩小时，变为：

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Meeting Agenda]|

进一步变为：

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Me...]|

CSS可行吗？我玩的东西我无法工作。

Answer 1

除了省略号demo here之外，我已经能够完成所有工作。

首先，我像疯了一样清理你的HTML。像crumbtrails这样的导航元素应该在HTML中的<nav>元素中，并且其中的项目列表在逻辑上是<ul>，就像它应该在任何地方一样。我进一步剥离了所有不需要的类，结果是：

<nav id="crumbtrail">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Section</a></li>
        <li><a href="#">Subsection</a></li>
        <li><a href="#">current page</a></li>
    </ul>
</nav>

CSS，除了在那里潜水并且试图了解我做了什么之外，不能推荐更多：

nav {
    font-family:Tahoma,Arial,sans-serif;
    color:white;
    max-width:500px;
}
nav ul {
    background:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-current.png) no-repeat right;
    font-size:0;
    height:27px;
    line-height:27px;
    list-style:none;
    white-space:nowrap;
    overflow:hidden;
}
nav li {
    background:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-left.png) no-repeat left;
    font-size:10pt;
    height:27px;
    display:inline-block;
    position:relative;
}
nav li:after {
    content:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-right.png);
    position:absolute;
    z-index:5;
    top:0;
    right:-16px;
}
nav li a {
    color:white;
    display:block;
    height:100%;
    width:100%;
    padding:0 16px 0 32px;
    text-decoration:none;
}
nav li:first-child a {
    padding-left:16px;
}
nav li:last-child {
    background:none;
    border:0;
}
nav li:last-child:after {
    content:none;
}

从the result可以看出，它有效。我在Chrome最新测试版，FF20，IE9和IE10中进行了测试，结果都相同。在制作这个crumbtrail时，没有一行Javascript受到伤害。

我已经尝试了所有内容以获得省略号，但浏览器非常挑剔只允许在内联元素上使用，并且我无法在不使用inline-block的情况下完成样式设置。这就是游戏的结果。你理论上可以在那里修补一些JS，但是如果它真的很重要，但我认为这也很好。

享受：）

Answer 2

纯CSS方法是将white-space:nowrap应用于痕迹，将.last元素的宽度设置为非常长，并将痕迹上的overflow属性设置为隐藏：

然后，根据你想要的右边缘看，你可以在.last中添加一个设计钩子跨度，用right:0px;绝对定位，将.last上的位置保持为静态（默认值））以便定位网格是外部容器，然后使用此跨度伪造最后一个面包屑的右边缘（如果需要）。

.breadcrumb{
    white-space:nowrap;position:relative
    background:lightblue;
    height:1.7em;line-height:1.5em;
    overflow:hidden;padding:3px;}
.breadcrumb > span{
    display:inline-block;background:#eee
    margin-right:3px;padding:1px 5px }
.last {width:2000px}
.last span{position:absolute;right:0px;
    background:lightblue;width:3px;
    top:-1px;bottom:-5px;}

请参阅此示例：http://jsfiddle.net/mhfaust/Mtc8g/2/

没有包装的浮动元素（截断最后一个元素）

2 个答案: