导航栏没有换行符,左侧有调整大小的面包屑,右侧有固定菜单
navigation bar with no line breaks and a resizing breadcrumb on the left and fixed menu on right
我正在尝试找到一种解决方案,仅使用 css 而不使用 js 来自动调整导航栏中面包屑的大小。
导航栏的宽度应为 100%。
右侧应始终显示用户菜单。
左边是面包屑导航。该元素中的元素应调整大小 using text-overflow: ellipsis
到目前为止我已经尝试了各种方法。我无法将用户菜单浮动到右侧,因为这会在我 运行 超出 space 时将其推到底部。但是导航栏应该只有一行。
然后我尝试使用 table 布局,将导航栏保持在一行,用户菜单和面包屑均为一个 table 单元格。但是,只要没有足够的内容,用户菜单就会被推到屏幕的右侧 space 而不是缩短面包屑。
导航栏的行为方式如下:
如果足够space,面包屑会粘在左边,用户菜单会粘在右边
------------------------------------------------------------------------
| bread 1 > bread 2 user logout |
------------------------------------------------------------------------
如果没有足够的 space,用户菜单应该保持在右边的全尺寸。而面包屑应该缩短。
------------------------------------------------------------------------
| very very long br.... > very very long br.... > very.. user logout |
------------------------------------------------------------------------
这是基本标记:
<nav>
<ol>
<li><div>one ></div></li>
<li><div>two is longer than one ></div></li>
<li><div>three is longer than two</div></li>
</ol>
<div class="user">
<div>dont</div>
<div>resize</div>
</div>
</nav>
这里是对应的fiddle:https://jsfiddle.net/eex8yrLt/
如果您可以将 div.user 移到
- 之前,这里是适合您的解决方案。它基于使列表项具有 display: inline;
nav {
width: 70%;
}
nav * {
white-space: nowrap;
overflow: hidden;
}
nav ol {
margin: 0;
padding: 0;
text-overflow: ellipsis;
}
nav li {
list-style: none;
display: inline;
}
.user {
float: right;
background: lightcoral;
}
.name, .acct-no {
margin-left: 1em;
}
<nav>
<div class="user">
<span class="name">John Doe</span>
<span class="acct-no">1267902</span>
</div>
<ol>
<li>one ></li>
<li>two is longer than one ></li>
<li>three is longer than two</li>
</ol>
</nav>
使用 flexbox 似乎是满足我所有要求的唯一方法。
给定标记
<div class="nav">
<div class="bread">
<span>
1 breadcrumb
</span>
<span>
2 very long breadcrumb
</span>
<span>
3 very long breadcrumb
</span>
</div>
<div class="user">
<span>
hello
</span>
<span>
user
</span>
</div>
</div>
首先导航栏本身需要是一个 flexbox
.nav {
display: flex;
width: 100%;
}
然后面包屑容器需要是另一个 flexbox,这样它可以平等地缩小每个项目,并为 white-space 一个 nowrap,这样所有的东西都在一行中。
.bread {
display: flex;
white-space: nowrap;
}
面包屑的每一项都使用省略号溢出
.bread span {
text-overflow: ellipsis;
overflow: hidden;
}
最后,用户菜单根本不应该弯曲并得到一个 margin-left: auto
,所以它会粘在右侧。
.user {
flex: none;
white-space: nowrap;
margin-left: auto;
}
fiddle 在这里:https://jsfiddle.net/7oyu34gg/1/