Problème de dépassement de pain d'argent

Question

J'ai trouvé un didacticiel de file d'administration CSS3 et j'ai fait quelques modifications (bien que la version du didacticiel ait eu le même problème) et a constaté que si la chaussette est allée sur une nouvelle ligne, elle échouerait de manière misérablement en raison de son débordement: caché Pour cacher les pseudo-éléments ...

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

Voici le violon ... http://jsfiddle.net/kggnb/40/

J'ai tenté de modifier le CSS pour résoudre ce problème, mais je ne peux pas sembler voir un moyen de changer les pseudo-éléments sans les rendant plus étroits, mais cela signifierait également avoir des points extrêmement pointus.

Le HTML est rendu sur le serveur, la meilleure solution que je puisse penser consiste à mettre dans certaines vérifications avant de vérifier le nombre d'éléments générant, puis jetrant simplement des débordements après une certaine taille d'écran à l'intérieur d'un nouvelle liste et à partir de chaque fois qu'il frappe cette largeur.

Une autre idée qu'un collègue a eu lieu avec une image pour les points, mais je préfère coller un correctif CSS si cela est possible.

Toutes autres idées / correctifs?

merci.

update - Désolé, je vais clarifier. Je ne veux pas que les flèches apparaissent du tout, la version correcte de la chapelure ressemblera à ceci. http://jsfiddle.net/kggnb/49/

Le problème utilise des bordures et une hauteur pour faire des triangles dans CSS3, en raison du point que je souhaite pour le triangle, les pseudo-éléments doivent être assez volumineux, régler le débordement: cachée résout ce problème en se débarrassant du reste du reste, mais Lorsque la chapelure s'étend sur une ligne sur la page, des problèmes se posent.

Je pourrais utiliser Broty, mais cela ne fonctionnerait pas dans IE8.

Answer 1

http://jsfiddle.net/kggnb/50/

Il suffit de faire la flèche plus petite, voici les modifications:

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