面包屑会收缩以掩盖内容

Question

我希望完成一些缩小的面包屑工作（希望没有js ...但我可以适应香草js）

我有很多物品需要放入面包屑之类的物品（不可导航）

我想要的是

其中活动项目始终可读，并且如果活动项目很少，则全部可读（即，非活动标签会调整其宽度以适合可用宽度，确保活动项目完全可见后再显示）Ive按照了教程并使其非常接近（但我不知道如何缩放）

我得到的是

/* 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来说很糟糕：（

Answer 1

您可以尝试使用 flexbox ：

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

• 将flex: 0 0 auto添加到第一个li和最后一个min-width（这是一个速记，表示 flex项不应增长或收缩，而只能采用其< em> auto 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>

poundsTo()

Answer 2

一种方法是根据需要使用flex-box来实现面包屑元素的自适应大小调整。

另外，要实现淡出效果，您可以在linear-gradient列表项的内部范围内引入一个伪元素，该伪元素具有pending从透明到背景灰色的渐变。

下面的CSS调整应能满足您的要求：

/* Use flex box to auto size width of breadcrumb elements */
ul.breadcrumb {
  display:flex;
  flex-direction:row;
}

/* Update styling of inner span to position with absolute so
that left and right extents can be set */
ul.breadcrumb li.pending span.inner {
  position:absolute;
  width:unset;
  left:1.5rem;
  right:0;
  direction:ltr;
}

/* Create pseudo element on inner span which overlays graidient
to achieve fade-out effect */
ul.breadcrumb li.pending span::after {
  content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent,#F5F5F5);
}

/* 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>