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

问题如下：面包屑导航有一个固定的宽度(比如900px) – 所以,如果用户导航到一个位置导致面包屑大于900px的项目,我必须修剪它以适应设计.

所以,我遇到的部分就是：我怎样才能决定修剪多少和修剪的位置？我发现我可以修剪面包屑中间的文本溢出,这样就可以了

Some > Navigation > That > … > is > too > long

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

我真的坚持这个,是否有任何可接受的方式来处理这些问题？！

解决方法:

保留根元素,删除以下元素,直到面包屑适合.我实际上建议你在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解析器以保持锚标记的完整性.