Beschneiden einer Brotkrume

Question

Ich kämpfe gerade mit dem Problem, eine Breadcrumb-Navigation so zuzuschneiden, dass sie das Design meiner Website nicht zerstört.

Das Problem ist das folgende: Die Breadcrumb-Navigation hat eine feste Breite (sagen wir 900px) - Wenn der Benutzer also zu einem Element navigiert, dessen Position zu einem Breadcrumb führt, das größer als 900px ist, müsste ich es beschneiden, damit es in das Design passt.

Der Teil, in dem ich nicht weiterkomme, ist also dieser: Wie kann ich entscheiden, wie viel ich beschneiden muss und wo ich beschneiden muss? Ich habe herausgefunden, dass ich einfach den überlaufenden Text in der Mitte des Brotkrümels kürzen könnte, so dass sich folgendes ergeben würde

Einige > Navigation > Das > ... > ist > zu > lang

Aber wie kann ich entscheiden, wo ich schneiden soll? Und wie kann ich die Verankerung der Elemente vor dem Beschneiden bewahren?!

Ich bin wirklich ratlos, gibt es irgendeine anerkannte Methode, mit solchen Problemen umzugehen?!

Answer 1

Behalten Sie das Root-Element bei und entfernen Sie die folgenden Elemente, bis der Breadcrumb passt. Ich würde Ihnen empfehlen, dies in JavaScript zu tun, da Sie dann Methoden haben, um die Pixelbreite des Breadcrumbs zu berechnen, während Sie in PHP eine feste Anzahl von Zeichen als Unterbrechungspunkt verwenden müssten, was immer zu unterschiedlichen Längen führen würde. Mit JS wäre besser sowieso für SEO und so, wie die Links noch da sein würde, nur versteckt.

Angenommen, Sie haben ein einfaches Listenelement als Breadcrumb:

<ul id="breadcrumb">
    <li><a href="http://stackoverflow.com/">Home</a></li>
    <li><a href="http://stackoverflow.com/products/">Products</a></li>
    <li><a href="http://stackoverflow.com/products/hats/">Hats</a></li>
    <li><a href="http://stackoverflow.com/products/hats/large/">Large</a></li>
    <li><a href="http://stackoverflow.com/products/hats/large/red/">Red</a></li>
    <li><a href="http://stackoverflow.com/products/hats/large/red/round/">Round</a></li>
</ul>

Sie können dann die Länge wie folgt kürzen (mit jQuery):

if($('#breadcrumb').width() > 900) {
    $('#breadcrumb li:first').after('<li>...</li>');

    while($('#breadcrumb').width() > 900) {    
        $('#breadcrumb li').eq(2).remove();
    }
}

Ein einfaches Beispiel, das wahrscheinlich nicht funktioniert, Ihnen aber eine Vorstellung vermitteln soll.

Übrigens, wenn Sie das Trimmen in PHP machen wollen, müssen Sie es tun, wenn der Brotkrümel gebildet wird, wenn Sie es einfach halten wollen. Wenn Sie danach mit dem Beschneiden beginnen, müssen Sie auf einige ziemlich komplexe reguläre Ausdrücke zurückgreifen oder eine Art DOM-Parser in Ihr Projekt einbauen, um die Anker-Tags intakt zu halten.

Answer 2

Mir ist klar, dass meine Lösung eher designorientiert als programmiert ist, aber ich persönlich würde die Brotkrümel nicht kürzen. Stattdessen, wenn die Breadcrumbs Inhalt 900px überschreiten, würde ich eine png überlagern, die von völlig undurchsichtig zu voller Transparenz geht und einfach machen es aussehen wie der erste Teil der Breadcrumbs ausblendet. Dann mit jQuery, würde ich die Breadcrumbs entweder links oder rechts scrollen, je nach der Mausposition über sie (basierend auf Prozentsatz von links oder rechts Rand, wo Mitte ist entweder 0% oder 100%). Auf die gleiche Weise würde ich dann eine gespiegelte Version des gleichen transparenten png Bild auf der rechten Seite, für wenn der Cursor näher an den linken Rand ist zu verwenden.

Hier ein Beispiel, um zu verdeutlichen, was ich sagen will:

Ich hoffe, das hilft!

Answer 3

Angenommen, Sie möchten nicht, dass die Brotkrümel am Ende eine Pause machen, dann gehen Sie wie folgt vor.

Verwenden Sie eine Funktion, die zu lange Wörter abschneidet. Legen Sie also fest, wie lang das längste Wort sein soll. Ab einem bestimmten Punkt wird das Wort nicht mehr angezeigt, sondern Sie machen das übliche ... am Ende des Wortes und fahren mit dem nächsten Teil des Breadcrumb fort.

Werfen Sie einen Blick auf diese Seite.

http://www.the-art-of-web.com/php/truncate/