浮动元素无包装（截断最后一个元素） [英] floating elements without wrapping (truncate last element)
问题描述
我看过很多类似的问题，但是我找不到任何东西，似乎满足了我想要做的事情。我在我的网站上有一些面包屑。目前的HTML看起来像这样：
I've seen many similar questions, but none that I can find seem to satisfy what I'm trying to do. I have some breadcrumbs on my site. Currently the HTML looks something like this:
<div class="breadcrumb">
<span>Home</span>
<span>Section</span>
<span>Subsection</span>
<span class="last">current page</span>
</div>
我需要一些事情发生，我不能弄清楚。除了最后的< div> 应该根据< span> 中的文本大小水平放大。由于面包屑的最终格式化将看起来像一个不同的部分，< span class =last> 需要填充从
I need a couple of things to happen, that I cant figure out. All but the last <div> should size horizontally based on size of the text in the <span>.Since the final formatting of the bread crumbs will look like a distinct section, the <span class="last"> needs to fill the remaining space from the end of the previous span to the end of enclosing section.
如果封闭视图宽度（最大宽度为960像素，但有时较小）太窄，无法查看所有内容，则最后一次潜水应该使用类似text-overflow：ellipsis;。
If the enclosing view width (max-width of 960px, but sometimes smaller) is too narrow to see everything, the last dive should get smaller and smaller and truncate the text within it (instead of wrapping the itself) using something like text-overflow: ellipsis;.
这样的东西，它应该越来越小，并截断其中的文本（而不是包装自身） >
In other words:
|[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？
Is this doable with CSS? The stuff I played with I couldn't make work.
推荐答案
我已经能够得到它在那里除了省略号：此处演示。
Well I've been able to get it all in there except the ellipsis: demo here.
第一我清理你的HTML像疯了。诸如crumbtrails之类的导航元素应该在HTML中的< nav> 元素中，并且其中的项目列表在逻辑上是< ul> / code>喜欢它应该无处不在。此外，我删除了所有不需要的类，结果是：
First of all I cleaned up your HTML like mad. Navigation elements like crumbtrails should be in a <nav> element in HTML, and a list of items in there is logically a <ul> like it should be everywhere. Further I stripped all classes not required, result being:
<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，很好，不能推荐多少潜水在那里， did：
The CSS, well, can't recommend much more than diving in there and try to understand what I did:
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;
}
您可以从结果，它工作。我测试它在Chrome最新测试版，FF20，IE9和IE10，都显示相同的结果。
As you can see from the result, it works. I tested it in Chrome latest beta, FF20, IE9 and IE10, all show identical results. Not a single line of Javascript was harmed in the making of this crumbtrail.
我已经尝试过一些东西来获取省略号，但是浏览器真的很挑剔，只允许对于内联元素，我不能得到样式，而不使用 inline-block 。所以这是出了游戏。
I've tried everything to get the ellipsis in there, but browsers are really picky about only allowing that on inline elements, and I can't get the styling done without using inline-block. So that's out of the game. You could theoretically patch some JS on there to do that though if it's REALLY important, but I think this works fine too.
享受：）
这篇关于浮动元素无包装（截断最后一个元素）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
