css - 缩小以掩盖内容的面包屑

Question

我希望完成一些缩小面包屑的东西（希望没有 js ......但我可以满足于 vanilla js）

我有未知数量的项目需要放在类似面包屑的东西中（不可导航）

我想要的是

活动项目总是可读的，如果项目足够少，它们都是可读的（即非活动选项卡缩放它们的宽度以适应可用宽度，在确保活动项目完全可见后离开）我按照教程得到了它非常接近（但我不知道如何缩放它）

我得到的是

/* BREADCRUMBS.CSS */
ul.breadcrumb {
  list-style: none;
  width: 460px;
  height: 40px;
  border-radius: 2px;
  border: solid 1px #d2d2d2;
}

ul.breadcrumb li {
  float: left;
  border-top: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  font: 14px Roboto, "Helvetica Neue", sans-serif;
}
ul.breadcrumb li:first-of-type {
  border-left: 1px solid #d2d2d2;
}

ul.breadcrumb li span.inner {
  overflow: hidden;
  direction: rtl;
  white-space: nowrap;
  /* keeps everything on one line */
  width: 100%;
}

ul.breadcrumb li {
  color: #4a4a4a;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 0 10px 40px;
  background: #F5F5F5;
  position: relative;
  display: block;
  min-width: 10px;
  float: left;
  padding-right: 1em;
}

ul.breadcrumb li.active {
  color: #396d9a;
  background: white;
  min-width: 150px;
}

ul.breadcrumb li::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 12px solid #d2d2d2;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}

ul.breadcrumb li::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 21px solid transparent;
  border-left: 12px solid #F5F5F5;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  left: 100%;
  z-index: 2;
}

ul.breadcrumb li.active::after {
  border-left: 12px solid white;
}

ul.breadcrumb li:last-child {
  border-right: 1px solid #d2d2d2;
  padding-right: 1em;
}
ul.breadcrumb li:last-child::before {
  display: none;
  border: none;
}
ul.breadcrumb li:last-child::after {
  display: none;
  border: none;
}

<!-- breadcrumbs.html  !-->
Example 1. Works fine with a couple of items
<ul class="breadcrumb ng-star-inserted">
  <li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>

<hr/>

How Do i make inactive items shrink (and hide text as needed) so they all fit on the same row? while keeping the active tabs text visible
<ul class="breadcrumb ng-star-inserted">
  <li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
    <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>

（顺便说一句，我没有与这里的任何概念结婚（即，如果使用 ul 以外的元素更容易的话））......基本上我在 css 上很糟糕 :(

标签： csssassbreadcrumbs

Answer 1

您可以为此尝试使用 flexbox：

• 添加display: flex到ul（可选地覆盖其默认填充），

• 添加flex: 0 0 auto到第一个和最后一个li（这是一个简写，表示flex 项目不应增长或缩小，而应仅采用其自动宽度），

• 并可选择删除min-width第一个li。

请参阅下面的演示：

/* BREADCRUMBS.CSS */
ul.breadcrumb {
  list-style: none;
  width: 460px;
  height: 40px;
  border-radius: 2px;
  border: solid 1px #d2d2d2;
  display: flex; /* added */
  padding: 0; /* added */
}

ul.breadcrumb li {
  float: left;
  border-top: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  font: 14px Roboto, "Helvetica Neue", sans-serif;
}
ul.breadcrumb li:first-of-type {
  border-left: 1px solid #d2d2d2;
}

ul.breadcrumb li span.inner {
  overflow: hidden;
  direction: rtl;
  white-space: nowrap;
  /* keeps everything on one line */
  width: 100%;
}

ul.breadcrumb li {
  color: #4a4a4a;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 0 10px 40px;
  background: #F5F5F5;
  position: relative;
  display: block;
  min-width: 10px;
  float: left;
  padding-right: 1em;
}

ul.breadcrumb li.active {
  color: #396d9a;
  background: white;
  /*min-width: 150px;*/
  flex: 0 0 auto; /* added */
}

ul.breadcrumb li::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 12px solid #d2d2d2;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}

ul.breadcrumb li::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 21px solid transparent;
  border-left: 12px solid #F5F5F5;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  left: 100%;
  z-index: 2;
}

ul.breadcrumb li.active::after {
  border-left: 12px solid white;
}

ul.breadcrumb li:last-child {
  border-right: 1px solid #d2d2d2;
  padding-right: 1em;
  flex: 0 0 auto; /* added */
}
ul.breadcrumb li:last-child::before {
  display: none;
  border: none;
}
ul.breadcrumb li:last-child::after {
  display: none;
  border: none;
}

<!-- breadcrumbs.html  !-->
Example 1. Works fine with a couple of items
<ul class="breadcrumb ng-star-inserted">
  <li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>

<hr/>

How Do i make inactive items shrink (and hide text as needed) so they all fit on the same row? while keeping the active tabs text visible
<ul class="breadcrumb ng-star-inserted">
  <li class="active ng-star-inserted"><span class="inner">CLEAN DEVICE</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
    <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
  <li class="pending ng-star-inserted"><span class="inner">Reading</span></li>
</ul>