Css 无换行的浮动图元（截断最后一个图元）

我见过很多类似的问题，但没有一个能满足我的要求。我的网站上有一些面包屑。当前HTML的外观如下所示：

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

随着窗口缩小，将变为：

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

这进一步成为：

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

---

这在CSS中可行吗？我玩的东西无法使用。

纯CSS方法是将

空白：nowrap

应用于breadcrumb，将

最后一个
元素的宽度设置为很长，并将breadcrumb上的
overflow
属性设置为hidden：

然后，根据您希望右边缘的外观，您可以在内部添加一个设计钩跨度。最后，使用
right:0px绝对定位它，将位置保持为打开状态。最后一个为静态（默认），以便定位网格为外部容器，然后使用此跨距模拟最后一个面包屑的右边缘（如果需要）

请看下面的例子：
好吧，除了省略号之外，我已经能够将所有内容都放在这里了

首先，我疯狂地清理了你的HTML。像crumbtrails这样的导航元素应该在HTML中的
元素中，其中的项目列表在逻辑上是一个
元素，就像它应该无处不在一样。此外，我剥离了所有不需要的类，结果是：

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

从中可以看出，它是有效的。我在Chrome最新测试版FF20、IE9和IE10中测试了它，结果都是一样的。在制作这条线索的过程中，没有一行Javascript受到损害

我已经尝试了各种方法来添加省略号，但是浏览器非常挑剔只允许在内联元素上使用省略号，如果不使用
内联块
，我就无法完成样式设置。所以这是不可能的。从理论上讲，如果这真的很重要的话，你可以在那里修补一些JS来实现这一点，但我认为这也很好

享受：）
有趣的问题，让我在做了一些修改后再与您联系。您可能可以使用
flexbox
，但它还不是跨浏览器的。你对你想要完成的设计有印象吗？也许你可以设计
div.breadcrumb
，然后在顶部设计
span
的样式。你可以控制内容吗？我甚至还没有到设计样式的阶段，但我正在考虑一些类似于本网站上讨论的东西：。我对内容的控制有限，它将有大约3-5000页的内容（当地政府多年的新闻稿和会议议程）。我不想回去重新命名内容来解决问题。你看过trunk8了吗？谢谢这很接近。我喜欢省略号的想法，因为它使它看起来像是内容设计适合。我可能会看看js，看看我是否可以绕过它，但这肯定让我最接近。
.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;}

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

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