Breadcrumb-Überlaufprobleme.

Question

Ich fand ein CSS3-Breadcrumb-Tutorial und machte ein paar Bearbeitungen dafür (obwohl die Tutorial-Version das gleiche Problem hatte), und fand heraus, dass, wenn das Breadcrumb auf eine neue Zeile ging, dann aufgrund des Überlaufs dürfen, wenn er nicht fehlschlägt: versteckt Um die Pseudo-Elemente auszublenden ...

html

generasacodicetagpre.

css

generasacodicetagpre.

Hier ist die Geige ... http://jsfiddle.net/kggnb/40/

Ich habe versucht, Änderungen an der CSS vorzunehmen, um dies zu beheben, aber nicht scheinbar einen Weg zu sehen, um die Pseudo-Elemente zu ändern, ohne sie schmaler zu machen, aber dies bedeutet auch, extrem spitze Punkte zu haben.

Das HTML wird auf dem Server gerendert, die beste Lösung, von der ich denken kann, dass sie einige Überprüfungen einfügen, bevor er gerendert wird, um zu überprüfen, wie viele Elemente generiert werden, und werfen Sie einfach nur über eine bestimmte Bildschirmgröße in einem Neue Liste und starten Sie jedes Mal, wenn er diese Breite trifft.

Eine andere Idee, mit der ein Kollege aufkam, war ein Bild für die Punkte, aber ich würde lieber einen CSS-Fix aufhalten, wenn dies möglich ist.

Alle anderen Ideen / Korrekturen?

danke.

update - Sorry, ich werde klären. Ich möchte nicht, dass die Pfeile überhaupt auftreten, die richtige Version der Breadmruhre wird so aussehen. http://jsfiddle.net/kggnb/49/

Das Problem nutzt Grenzen und Höhe, um Dreiecke in CSS3 herzustellen, da der Punkt, den ich für das Dreieck wünsche, die Pseudo-Elemente für das Dreieck, die Pseudo-Elemente recht groß sind, einstellte Überlauf: verborgen, löst dieses Thema, indem er die übrig, aber Wenn die Breadcrumbs auf der Seite über eine Zeile übernimmt, ergeben sich Probleme.

Ich könnte Skew verwenden, aber dann würde es nicht in IE8 arbeiten.

Answer 1

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

Machen Sie einfach den Pfeil kleiner, hier sind die Änderungen:

generasacodicetagpre.