html - 面包屑溢出问题

Question

我找到了一个 css3 breadcrumb tutorial 并对其进行了一些编辑(尽管教程版本有同样的问题)，并且发现如果 breadcrumb 换行那么它会因为使用 overflow:hidden 而惨败隐藏伪元素...

html

<ul class="crumb">
    <li><a href="#">Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
</ul>

CSS

.crumb {
    list-style: none; 
    overflow: hidden;
    margin-bottom: 3px;
}
.crumb li {
    line-height: inherit;
}
.crumb li a {
    color: white;
    text-decoration: none; 
    padding: 0 0 0 20px;
    background: #777;
    position: relative; 
    display: block;
    float: left;
    border: solid 2px #777;
    font-size: 10px;
}
.crumb li a:after { 
    content: " "; 
    width: 0; 
    height: 0;
    line-height: 0;
    border-top:25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid #777;
    position: absolute;
    top: 50%;
    margin-top: -25px; 
    left: 100%;
    z-index: 2; 
}   
.crumb li a:before { 
    content: " ";
    width: 0; 
    height: 0;
    line-height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid white;
    position: absolute;
    top: 50%;
    margin-top: -25px; 
    margin-left: 2px;
    left: 100%;
    z-index: 1;
}
.crumb li:first-child a {
    padding-left: 8px;
}
.crumb li a:hover { 
    border-color: black;
    background: black;
}
.crumb li a:hover:after { 
    border-left-color: black !important;
}
.crumb li:last-child a:hover:after { 
    border-left-color: #e67e22 !important;
}
.crumb li:last-child a:after { 
    border-left-color: #e67e22 !important;
}
.crumb li:last-child a {
    border-color: #e67e22;
    background: #e67e22; 
}

这是 fiddle ... http://jsfiddle.net/kGgNb/40/

我试图通过更改 css 来解决此问题，但似乎无法找到一种方法来更改伪元素而不会使它们变窄，但这也意味着要有非常尖的点。

HTML 正在服务器上呈现，我能想到的最佳解决方案是在呈现之前进行一些检查以检查将生成多少元素，然后将超过特定屏幕尺寸的任何溢出的元素扔到一个新列表并在每次达到该宽度时重新开始。

一位同事提出的另一个想法是使用图像作为点，但如果可能的话，我宁愿坚持使用 css 修复。

任何其他想法/修复？

谢谢。

更新 - 抱歉，我会澄清一下。我根本不想出现箭头，面包屑的正确版本应该是这样的。 http://jsfiddle.net/kGgNb/49/

问题是在 css3 中使用 borders & height 制作三 Angular 形，因为我想要三 Angular 形的点，伪元素必须非常大，设置 overflow:hidden 通过去除剩余部分解决了这个问题，但是当面包屑跨越页面上的一行时，就会出现问题。

我可以使用 skew，但它在 IE8 中不起作用。

Answer 1

http://jsfiddle.net/kGgNb/50/

只需将箭头变小，更改如下:

.crumb li a:after { 
    ....
    border-top:9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #777;
    ....
    top:-2px;
}   
.crumb li a:before { 
    ....
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid white;
    ....
    top:-2px;
}