我目前正在努力解决修剪面包屑导航的问题，以免破坏我网站的设计。
问题如下：面包屑导航具有固定宽度（比如说 900 像素） - 因此，如果用户导航到其位置导致面包屑大于 900 像素的项目，我必须将其修剪为适合设计。
所以，我遇到的问题是：我如何决定修剪多少以及修剪的位置？我发现我可以只修剪面包屑中间的文本溢出，所以它会导致
一些 > 导航 > 那 > ... > is > too > long
但是我怎样才能决定在哪里剪呢？以及如何保护元素的锚点不被修剪？！
我真的被困在这个问题上，有没有公认的方法来处理这些问题？！
【问题讨论】：
标签： php html navigation breadcrumbs
保留根元素，删除后面的元素，直到面包屑适合。我实际上建议您在 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 解析器来保持锚标签的完整性。
【讨论】：
我确实意识到我的解决方案比编程更注重设计，但就个人而言，我不会修剪面包屑。相反，如果面包屑内容超过 900 像素，我将覆盖一个从完全不透明到完全透明的 png，并让它看起来像面包屑的第一部分淡出。然后使用 jQuery，我将向左或向右滚动面包屑，具体取决于鼠标在其上的位置（基于从右边距左边的百分比，其中中心为 0% 或 100%）。以同样的方式，当光标更靠近左边距时，我会在右侧使用相同透明 png 图像的翻转版本。
这里有一个例子可以更好地说明我的意思：
希望这会有所帮助！
【讨论】：
假设您不希望面包屑在到达终点时中断，这就是您要做的。
使用截断过长单词的函数。所以决定最长的单词应该有多长。在某个点之后而不是继续显示它，您通常在单词末尾执行 ... 并继续到面包屑的下一部分。
看看这个页面。
【讨论】：