Html 面包屑溢出问题

我找到了一个css3面包屑教程，并对其进行了一些编辑（尽管教程版本也有相同的问题），发现如果面包屑转到一个新行，那么它将由于使用溢出而失败：隐藏以隐藏伪元素

html

这是小提琴

我试图对css进行修改以解决这个问题，但似乎看不到一种在不使伪元素变窄的情况下修改伪元素的方法，但这也意味着要有非常尖锐的点

HTML是在服务器上呈现的，我能想到的最好的解决方案是在呈现之前进行一些检查，以检查将生成多少元素，然后将溢出的元素抛出一个新列表中的某个屏幕大小，并在每次到达该宽度时重新开始

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

还有其他想法/解决方案吗

谢谢

更新-对不起，我会澄清的。我根本不想让箭头出现，面包屑的正确版本将如下所示。

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

我可以使用skew，但在IE8中就不起作用了

只需将箭头变小，以下是更改：

.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;
}

---

对不起，我帮不上忙。我删除了我以前的答案。Andrew的答案似乎正是您想要的。这确实回答了问题，但也似乎偏离了半个像素（可能只是更改链接上的高度以解决此问题），使其看起来像这样-但非常感谢您指出我的疏忽！在更改每个属性时为我节省了一点时间，直到我找到了执行此操作的属性：）无论如何，我都执行了此操作，除了8px边框，我认为稍微干净一些

.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; 
}

.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;
}