修剪面包屑

Question

我目前正在努力解决修剪面包屑导航的问题，因此它不会破坏我网站的设计。

问题如下：面包屑导航有一个固定的宽度（比如900px） - 所以，如果用户导航到一个位置导致面包屑大于900px的项目，我必须将其修剪为适合设计。

所以，我被卡住的部分就是这样：我怎样才能决定修剪多少和修剪的位置？我发现我可以修剪面包屑中间的文本溢出，这样就会导致

  

一些＆gt;导航＆gt;那＆gt; ...＆gt;是>也是＆gt;长

但我怎样才能决定在哪里切？我怎样才能保留元素的锚点不被修剪？！

我真的坚持这个，是否有任何可接受的方法来解决这些问题？！

Answer 1

保留根元素，删除以下元素，直到面包屑适合。我实际上建议你在JavaScript中这样做，因为你有方法来计算面包屑的像素宽度，而在PHP中你必须使用固定数量的字符作为断点，这总是导致不同的长度。使用JS对于搜索引擎优化等更好，因为链接仍然存在，只有隐藏。

假设你有一个简单的列表元素作为你的痕迹：

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

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

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

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

一个简单的例子，可能不起作用，但应该给你一些想法。

顺便说一句，如果你想在PHP中修剪，你必须在形成面包屑时这样做，如果你想保持简单。如果您之后开始修剪，则必须使用一些非常复杂的正则表达式或在项目中包含某种DOM解析器以保持锚标记的完整性。

Answer 2

我确实意识到我的解决方案比编程更加面向设计，但就个人而言，我不会削减面包屑。相反，如果面包屑内容超过900px，我会覆盖从完全透明到完全透明的png，并简单地使它看起来像面包屑的第一部分淡出。然后使用jQuery，我会向左或向右滚动面包屑，具体取决于鼠标在其上的位置（基于右边距左侧的百分比，其中心为0％或100％）。以同样的方式，我会在右侧使用相同透明png图像的翻转版本，因为当光标更接近左边距时。

这是一个更好地说明我所说的内容的例子：

希望这有帮助！

Answer 3

假设你不希望面包屑在到达结束时休息一下，这就是你做的。

使用截断太长单词的函数。因此，决定最长的单词应该有多长。在某一点之后而不是继续显示它，你通常会......在单词的结尾处继续执行下一部分的痕迹。

看看这个页面。

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

Answer 4

Tatu Ulmanen有个好主意。但看起来应该用span替换li。以后不会填满整行。 ref Calculate text width with JavaScript