3

我见过很多类似的问题，但没有一个我能找到满足我正在尝试做的事情。我的网站上有一些面包屑。目前 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 的方式截断其中的文本（而不是包裹自身） ：省略号；。

换句话说：

|[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 可行吗？我玩的东西我无法工作。

4

2 回答 2

1

好吧，除了省略号： demo here之外，我已经能够将所有内容都包含在内。

首先，我疯狂地清理了你的 HTML。像 crumbtrails 这样的导航元素应该<nav>在 HTML 中的一个元素中，并且其中的项目列表在逻辑上<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 最新测试版、FF20、IE9 和 IE10 中对其进行了测试，都显示了相同的结果。在制作这个 crumbtrail 时，没有一行 Javascript 受到损害。

我已经尝试了所有方法来获得省略号，但是浏览器真的很挑剔只允许在内联元素上使用它，而且我无法在不使用inline-block. 所以这不在游戏范围内。理论上你可以在那里修补一些 JS 来做到这一点，但如果它真的很重要，但我认为这也很好。

享受 ：）

于 2013-05-07T22:43:27.373 回答
0

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

于 2013-05-07T22:26:21.430 回答