Question

我正在尝试找到一个解决方案，只使用css而不是js自动调整导航栏中的痕迹。

导航栏应为100％宽度。在右侧，应始终显示用户菜单。左边是面包屑导航。该元素中的元素应调整using text-overflow: ellipsis

的大小

到目前为止，我尝试过各种各样的事情。我不能将用户菜单向右浮动，因为每当我用完空间时它会将它推到底部。但是导航栏应该只有一行。

然后我尝试使用表格布局，使导航栏只保留一行，用户菜单和面包屑每个都是一个表格单元格。但是，只要没有足够的空间而不是缩短面包屑，用户菜单就会被推到屏幕外面。

以下是导航栏的行为方式：

如果有足够的空间，面包屑会向左移动，用户菜单会向右移动

------------------------------------------------------------------------
| bread 1 > bread 2                                        user logout |
------------------------------------------------------------------------

如果没有足够的空间，用户菜单应保持在其完整尺寸的右侧。而面包屑应该缩短。

------------------------------------------------------------------------
| very very long br.... > very very long br.... > very..   user logout |
------------------------------------------------------------------------

这是基本标记：

<nav>
  <ol>
    <li><div>one &gt;</div></li>
    <li><div>two is longer than one &gt;</div></li>
    <li><div>three is longer than two</div></li>
  </ol>
  <div class="user">
    <div>dont</div>
    <div>resize</div>
  </div>
</nav>

这里是相应的小提琴：https://jsfiddle.net/eex8yrLt/

Answer 1

如果你可以在＆lt; ol＆gt;之前移动div.user这是给你的解决方案。它基于使列表项显示：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 &gt;</li>
    <li>two is longer than one &gt;</li>
    <li>three is longer than two</li>
  </ol>
</nav>

Answer 2

使用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%;
}

然后面包屑容器需要是另一个弹性箱，因此它会平均缩小每个项目，并为白色空间设置一个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;
}

小提琴在这里：https://jsfiddle.net/7oyu34gg/1/

导航栏没有换行符，左侧是调整大小的导航栏，右侧是固定菜单

2 个答案: