如何使用:last-child实现面包屑最后一项占满剩余空间并保留省略效果

数据老陈

2026-9-29

可以通过:last-child实现该需求，完全符合你要求的动态适配、不换行、末尾省略的效果。

实现思路

面包屑容器本身使用flex布局，仅需要针对最后一级元素做两个调整即可：

取消统一给所有面包屑设置的max-width限制
增加flex: 1属性，让最后一级自动填充行内剩余的所有空间

原有给所有面包屑设置的溢出省略规则可以保留，最后一级文本过长时依然会自动在末尾显示省略号，不会换行。

修改后完整CSS代码

.breadcrumb {
  display: flex;
  /* 禁止换行，保证所有面包屑在同一行显示 */
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

ol.breadcrumb.training-breadcrumb li.breadcrumb-item {
  display: block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 可选：分隔符间距，不需要可删除 */
  margin-right: 8px;
}

/* 可选：面包屑分隔符，不需要可删除 */
ol.breadcrumb.training-breadcrumb li.breadcrumb-item:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
}

/* 选中最后一级面包屑做特殊处理 */
ol.breadcrumb.training-breadcrumb li.breadcrumb-item:last-child {
  max-width: none;
  flex: 1;
  margin-right: 0;
}