css - 不换行的 float 元素(截断最后一个元素)

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">需要填充从前一个跨度末尾到封闭部分末尾的剩余空间。

如果封闭的 View 宽度(最大宽度为 960 像素，但有时更小)太窄而无法看到所有内容，则最后一次潜水应该越来越小，并使用类似的方法截断其中的文本(而不是将其自身包裹起来)文本溢出:省略号;.

换句话说:

|[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 这样的导航元素应该在 <nav> 中HTML 中的元素，其中的元素列表在逻辑上是 <ul>就像它应该无处不在。此外，我删除了所有不需要的类(class)，结果是:

<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 来做到这一点，但如果它真的很重要，但我认为这也很好用。

享受 :)