当前位置：文江博客话题详情

修剪面包屑

发布于 2024-09-25 14:34:33 字数 344 浏览 0 评论 0原文

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

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

所以，我陷入困境的部分是：我如何决定修剪多少以及修剪哪里？我发现我可以修剪面包屑中间溢出的文本，这样就会导致

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

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

我真的很困惑，有没有可以接受的方法来处理此类问题？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天气好吗我好吗 2024-10-02 14:34:33

保留根元素，删除以下元素，直到面包屑适合。我实际上建议您在 JavaScript 中执行此操作，因为这样您就可以使用方法来计算面包屑的像素宽度，而在 PHP 中，您必须使用固定数量的字符作为断点，这总是会导致不同的长度。无论如何，使用 JS 对于 SEO 等来说会更好，因为链接仍然存在，只是隐藏了。

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

<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 解析器来保持锚标记完整。

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.

回复收藏 0 原文

悍妇囚夫 2024-10-02 14:34:33

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

这是一个例子，可以更好地说明我的意思：

alt text