修剪面包屑 [英] Trimming a breadcrumb

问题描述

问题如下：面包屑导航（breadcrumb navigation）：面包屑导航（breadcrumb navigation）有一个固定的宽度（比方说900px） - 因此，如果用户导航到位置导致面包屑大于900px的项目，我不得不修剪它以适应设计。

所以，我被卡住的部分是这样的：我怎样才能决定要修剪多少以及在哪里修剪？我发现我可以修剪面包屑中间的文本溢出，所以它会导致

某些>导航>那>> ...>是>太长>

但我该如何决定在哪里剪切？我怎么能够保留修剪元素的锚点？！

我真的被困在这个问题上，有没有什么可以接受的方法来处理这样的问题保留根元素，删除以下元素，直到breadcrumb适合。 我实际上建议你在JavaScript中这样做，因为那样你就有方法来计算面包屑的像素宽度，而在PHP中，你必须使用固定数量的字符作为断点，这总是会导致不同的长度。使用JS会更好，反正搜索引擎优化等，因为链接仍然存在，只有隐藏。

假设你有一个简单的列表元素作为你的面包屑：

 < ul id =breadcrumb> 
< li>< a href =/>主页< / a>< / li> 
< li>< a href =/ products />产品< / a>< / li> 
< li>< a href =/ products / hats />帽子< / a>< / li> 
< li>< a href =/ products / hats / large />大< / a>< / li> 
< li>< a href =/ products / hats / large / red />红色< / a>< / li> 
< li>< a href =/ products / hats / large / red / round /> Round< / a>< / li> 
< / ul> 
  

然后你可以像这样修改长度（使用jQuery）：

  if（$（'＃breadcrumb'）。width（）> 900）{
 $（'＃breadcrumb li：first'）。after （ '<李> ...< /立GT;'）; （$（'＃breadcrumb'）。width（）> 900）{
 $（'＃breadcrumb li'）。eq（2）.remove（）; 
 
。 
 
 
 
 
 $ b $ p 
 $ b 
一个简单的例子，可能不起作用，但应该给你一些想法。 
 
 
顺便说一句，如果你想在PHP中进行修剪，你必须在面包屑形成时做，如果你想保留它简单。如果之后开始修剪，则必须使用一些非常复杂的正则表达式，或者在项目中包含某种DOM解析器，以保持锚标记完好。
 
I'm currently struggling with the problem of trimming a breadcrumb navigation so it doesn't destroy my site's design.

The problem is the following: The breadcrumb navigation has a fixed width (let's say 900px) - So, if the user navigates to an item whose location results in a breadcrumb that is larger than 900px I'd have to trim it to fit into the design.

So, the part where I'm stuck is this: How can I decide how much to trim and where to trim? I figured out that I could just trim the overflow of text in the middle of the breadcrumb, so it would result in

  
Some > Navigation > That > ... > is > too > long
But how can I decide where to cut? And how will I be able to preserve the anchors of the elements from being trimmed?!

I'm really stuck on this, is there any accepted way to deal with such issues?!
解决方案
Keep the root element, remove following elements until the breadcrumb fits. I'd actually recommend you to do this in JavaScript as then you'd have methods to calculate the pixel width of the breadcrumb, whereas in PHP you'd have to use a fixed number of characters as the break point which would always result in different lengths. Using JS would be better anyways for SEO and such, as the links would still be there, only hidden.

Assuming you have a simple list element as your breadcrumb:
<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>
You can then trim the length like this (using jQuery):
if($('#breadcrumb').width() > 900) {
    $('#breadcrumb li:first').after('<li>...</li>');

    while($('#breadcrumb').width() > 900) {    
        $('#breadcrumb li').eq(2).remove();
    }
}
A simple example and probably doesn't work, but should give you some idea.

BTW, if you want to do the trimming in PHP, you have to do it when the breadcrumb is being formed if you want to keep it simple. If you start trimming afterwards, you'd have to resort to some pretty complex regular expressions or to including some kind of DOM parser in your project to keep the anchor tags intact.

                        
这篇关于修剪面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！