缩小以掩盖内容的面包屑
Breadcrumbs that shrink to mask content
我希望完成一些缩小面包屑的东西(希望没有 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 方面很糟糕 :(
您可以为此尝试 flexbox:
将 display: flex
添加到 ul
(可选地覆盖其默认填充),
将 flex: 0 0 auto
添加到第一个和最后一个 li
(这是一个 shorthand 表示 flex 项目 不应增大或缩小,而应仅采用其 auto 宽度),
并可选择删除第一个 li
的 min-width
。
参见下面的演示:
/* 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>
一种方法是使用 flex-box 来根据需要实现面包屑元素的自适应大小。
此外,要实现淡出效果,您可以在 pending
列表项的内部跨度上引入一个伪元素,该元素具有从透明渐变为背景灰色的 linear-gradient
。
下面的 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>
我希望完成一些缩小面包屑的东西(希望没有 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 方面很糟糕 :(
您可以为此尝试 flexbox:
将
display: flex
添加到ul
(可选地覆盖其默认填充),将
flex: 0 0 auto
添加到第一个和最后一个li
(这是一个 shorthand 表示 flex 项目 不应增大或缩小,而应仅采用其 auto 宽度),并可选择删除第一个
li
的min-width
。
参见下面的演示:
/* 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>
一种方法是使用 flex-box 来根据需要实现面包屑元素的自适应大小。
此外,要实现淡出效果,您可以在 pending
列表项的内部跨度上引入一个伪元素,该元素具有从透明渐变为背景灰色的 linear-gradient
。
下面的 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>