3

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

问题如下： 面包屑导航具有固定宽度（比如说 900 像素） - 因此，如果用户导航到其位置导致面包屑大于 900 像素的项目，我必须对其进行修剪以适应设计。

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

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

但是我怎么能决定在哪里剪呢？我将如何保护元素的锚点不被修剪？！

我真的坚持这一点，有没有可以接受的方法来处理这些问题？！

4

3 回答 3

5

保留根元素，删除以下元素，直到面包屑适合。我实际上建议您在 JavaScript 中执行此操作，因为这样您就有计算面包屑像素宽度的方法，而在 PHP 中，您必须使用固定数量的字符作为断点，这总是会导致不同的长度。无论如何，对于 SEO 等来说，使用 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 解析器以保持锚标记的完整性。

于 2010-09-30T20:04:45.117 回答
4

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

这是一个更好地说明我在说什么的例子：

替代文字

希望这可以帮助 ！

于 2010-09-30T20:44:14.937 回答
0

假设您不希望面包屑在到达终点时中断，这就是您要做的。

使用截断过长单词的函数。所以决定最长的单词应该有多长。在某个点之后而不是继续显示它，您通常在单词末尾执行 ... 并继续到面包屑的下一部分。

看看这个页面。

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

于 2010-09-30T20:08:01.360 回答