如何在anchor标签数量超过2个时截断面包屑，仅保留首尾及可点击省略号

云原生阿岚

2026-9-23

代码调整方案

你需要修改原有JS逻辑，调整插入省略号的位置、增加隐藏中间a标签的处理，具体修改如下：

1. JavaScript 代码调整

替换原有JS代码为以下内容：

var menuBreadcrumb = document.getElementById('menu-breadcrumb');
var allAnchors = $("#menu-breadcrumb a");
var counta = allAnchors.length;

if (counta > 2) {
  // 隐藏除第一个和最后一个之外的所有a标签
  allAnchors.slice(1, -1).addClass('breadcrumb-hidden');
  // 在第一个a标签后插入可点击省略号
  let mbcElement = '<a class="mbc-link-back" href="#" data-menu-item-id="">...</a>';
  allAnchors.eq(0).after(mbcElement);
}

2. CSS 代码调整

在原有CSS基础上新增隐藏类的样式即可：

.mbc-link-back {
  color: #0066cc;
  text-decoration: none;
}

#menu-breadcrumb a+a::before {
  color: #222;
  content: '>';
  cursor: default;
  padding: 0 3px;
}

/* 新增隐藏中间标签的样式 */
.breadcrumb-hidden {
  display: none;
}