Coupe un fil d'Ariane

Question

Je suis actuellement aux prises avec le problème de la coupe un chemin de navigation de sorte qu'il ne détruit pas la conception de mon site.

Le problème est le suivant: Le chemin de navigation a une largeur fixe (disons 900px) - Donc, si les Navigue utilisateur à un élément dont les résultats emplacement dans un fil d'Ariane qui est plus grand que 900px je dois couper à s'intégrer dans la conception.

Alors, la partie où je suis coincé est la suivante: Comment puis-je décider combien de couper et où couper? Je me suis dit que je pouvais couper le trop-plein du texte au milieu du chemin de navigation, il entraînerait

  

Certains> Navigation> Cette> ...> est-> trop> long

Mais comment puis-je décider où couper? Et comment vais-je être en mesure de préserver les points d'ancrage des éléments d'être parés!

Je suis vraiment coincé à ce sujet, est-il un moyen accepté de traiter ces questions?

Answer 1

Gardez l'élément racine, supprimer des éléments suivants jusqu'à ce que les ajustements panés. Je vous recommande vraiment de le faire en JavaScript comme vous auriez des méthodes pour calculer la largeur de pixel de fil d'Ariane, alors qu'en PHP, vous devriez utiliser un nombre fixe de caractères comme point de rupture qui donne toujours longueurs différentes. En utilisant JS serait mieux de toute façon pour le référencement et ce, que les liens seraient toujours là, que caché.

En supposant que vous avez un simple élément de la liste comme fil d'Ariane:

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

Vous pouvez alors couper la longueur comme celui-ci (en utilisant jQuery):

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

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

Un exemple simple et ne fonctionnera probablement pas, mais devrait vous donner une idée.

BTW, si vous voulez faire la coupe en PHP, vous devez le faire quand le fil d'Ariane est formé si vous voulez garder les choses simples. Si vous commencez à tailler après, vous auriez à recourir à des expressions régulières assez complexes ou d'inclure une sorte d'analyseur DOM dans votre projet pour garder les balises d'ancrage intact.

Answer 2

Je me rends compte que ma solution est plus axée sur la conception que la programmation, mais personnellement, je ne serais pas couper les miettes de pain. Au lieu de cela, si la teneur en panure dépasse 900px, je superposer une .png qui va de complètement opaque à une transparence totale et simplement faire ressembler à la première partie de la fane mie de pain sur. Puis, avec jQuery, je défiler les miettes de pain, soit à gauche ou à droite, en fonction de la position de la souris au-dessus (basé sur le pourcentage de gauche de la marge de droite, où le centre est soit 0% ou 100%). De la même manière, je puis utiliser une version inversée de la même image png transparent sur le côté droit, lorsque le curseur est plus proche de la marge de gauche.

Voici un exemple pour mieux illustrer ce que je dis:

Hope this helps!

Answer 3

En supposant que vous ne voulez pas les miettes de pain pour faire une pause quand la portée de la fin, voici ce que vous faites.

Utilisez une fonction que les mots de troncature qui sont trop longues. Donc, prendre une décision de combien de temps le plus long mot devrait être. Après un certain point au lieu de continuer à afficher, vous faites le plus souvent ... à la fin du mot et continuer à la prochaine partie du fil d'Ariane.

Jetez un oeil à cette page.

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

Answer 4

Tatu Ulmanen a une bonne idée. Mais les regards devraient remplacer li avec la durée. Plus tard, ne remplira pas une ligne entière. ref Calculer texte largeur avec JavaScript