php - 修剪面包屑

Question

我目前正在努力解决修剪面包屑导航的问题，以免破坏我网站的设计。

问题如下:面包屑导航具有固定宽度(假设为 900 像素)- 因此，如果用户导航到某个项目，其位置导致面包屑大于 900 像素，我必须将其修剪为融入设计。

所以，我卡住的部分是:我如何决定要修剪多少以及修剪哪里？我发现我可以修剪面包屑中间溢出的文本，这样会导致

Some > Navigation > That > ... > is > too > long

但是我怎样才能决定在哪里剪切呢？我将如何保护元素的 anchor 不被修剪？!

我真的被困在这个问题上了，有什么可以接受的方法来处理这些问题吗？!

Answer 1

保留根元素，删除后续元素，直到面包屑适合。我实际上建议您在 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 解析器以保持 anchor 标记的完整性。