纯CSS Flex实现面包屑智能收缩：仅优先压缩过宽项至指定比例

架构老林

2026-10-2

解决方案

完全可以不借助JavaScript实现该效果，核心逻辑是利用flex收缩规则和max-width的上限约束组合实现。

实现思路

给所有面包屑链接项设置flex: 0 1 auto，保证项默认优先展示自身原始宽度，仅当容器空间不足时才触发收缩
额外给每个面包屑链接项设置max-width: 20%，限制单个项的最大宽度不会超过容器的20%，宽度小于20%的短链接不受该规则影响，保持原始宽度
分隔符保持flex: 0 0 auto不参与伸缩即可

修正后的CSS代码

.breadcrumbs {
  width: 300px;
  display: flex;
  align-items: center;
  border: 1px solid #000;
  margin: 0 0 50px 0;
  padding: 5px;
  box-sizing: border-box; /* 避免padding导致容器实际宽度超出计算值 */
}

.breadcrumb-separator {
  flex: 0 0 auto;
  margin: 0 5px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 统一面包屑链接样式 */
.breadcrumb-item {
  flex: 0 1 auto;
  max-width: 20%; /* 单个项最大占容器20%宽度 */
}

对应HTML调整

把所有breadcrumb1/2/3/4统一替换为breadcrumb-item即可：

<div class="breadcrumbs">
  <a href="#" class="breadcrumb-item ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb-item ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb-item ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb-item ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb-item ellipsis">
    第五个测试项
  </a>
</div>