проблема переполнения breadcrumb

Question

Я нашел учебник css3 breadcrumb и сделал несколько изменений к нему (хотя в учебной версии была та же проблема), и обнаружил, что если бы пачка появилась на новой строке, то она потерпит неудачу из-за нее, используя переполнение: скрытый, чтобы скрыть элементы псевдо ...

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

Вот скрипка ... http://jsfiddle.net/kGgNb/40/

Я попытался внести изменения в css, чтобы исправить это, но, похоже, не вижу способа изменить псевдоэлементы, не делая их более узкими, но это также означает наличие чрезвычайно заостренных точек.

HTML обрабатывается на сервере, лучшее решение, о котором я могу думать, заключается в том, чтобы вставить некоторые проверки перед его рендерингом, чтобы проверить, сколько элементов будет сгенерировано, а затем просто бросать любые переполненные за определенный размер экрана внутри новый список и начиная каждый раз, когда он достигает этой ширины.

Другая идея, с которой столкнулся коллега, заключалась в использовании изображения для очков, но я предпочел бы использовать исправление css, если это возможно.

Любые другие идеи/исправления?

Спасибо.

Обновление - Извините, я уточню. Я не хочу, чтобы стрелки появлялись вообще, правильная версия панировочных сухарей будет выглядеть так. http://jsfiddle.net/kGgNb/49/

Вопрос использует границ & высоту, чтобы сделать треугольники в CSS3, из точки я хочу для треугольника, псевдо элементы должны быть достаточно большими, установка переполнения: скрытый решает эту проблему, избавившись от остатки, но когда панировочные сундуки охватывают одну строчку на странице, возникают проблемы.

Я мог бы использовать перекос, но тогда он не будет работать в 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; 
}