浮动元素不换行（截断最后一个元素）

Question

浮动元素不换行（截断最后一个元素）

4

我看到了很多类似的问题，但是没有一个能让我满意。我在我的网站上有一些面包屑导航。目前的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">需要填充前一个到封闭部分结束的剩余空间。

如果封闭视图的宽度(最大宽度为960像素，但有时更小)太窄而无法显示所有内容，则最后一个

应该越来越小，并截断其中的文本(而不是换行)，使用类似于text-overflow: ellipsis;的方法。

换句话说：

|[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实现吗？我尝试了一些内容，但没能成功。

- abruzzi

有趣的问题，让我琢磨一下后再回复您。 - Niels Keurentjes

你可能可以使用 flexbox 来实现这个，但它在跨浏览器方面还不是很好。你有设计图吗？也许你可以先给 div.breadcrumb 添加样式，然后再对上面的 span 进行样式设置。 - Christopher Parsons

你对内容有控制权吗？ - AbsoluteƵERØ

我甚至还没有到样式阶段，但我正在考虑类似于此网站所讨论的外观：http://blog.wasimshaikh.com/2012/07/21/breadcrumbs-fix-using-jquery/。我对内容的控制有限，它将包含大约3-5000页的内容（当地政府多年的新闻发布和会议议程）。我不想回去重新命名内容以解决问题。 - abruzzi

你看过trunk8吗？http://jrvis.com/trunk8/ - Rick Viscomi

2个回答

0

一个纯CSS的方法是将white-space:nowrap应用于breadcrumb，将.last元素的宽度设置为非常长，并在breadcrumb上设置overflow属性为hidden：

然后，根据您想要的右边缘的外观，您可以在.last内部添加一个设计钩子span，绝对定位使用right:0px;，使.last的位置保持静态（默认），以便定位网格是外部容器，然后使用此span来模拟最后一个面包屑的右边缘（如果需要）。

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

- Faust

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niels Keurentjes · Accepted Answer

我已经把所有内容都放进去了，除了省略号：这里演示。

首先，我大量清理了你的HTML。像面包屑导航这样的导航元素应该在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;
}

从结果中可以看出，它是有效的。我在Chrome最新测试了它的beta版、FF20、IE9和IE10，所有的结果都是相同的。在制作这个面包屑导航时没有一行Javascript代码受到了伤害。

我尝试了各种方法来让省略号显示出来，但浏览器对只允许在内联元素上使用省略号非常挑剔，而且我无法使用inline-block完成样式设置。所以这个方法已经不适用了。如果真的很重要，理论上你可以在那里添加一些JS来实现，但我认为这个方法也很好。

享受吧 :)