导航栏没有换行符,左侧有调整大小的面包屑,右侧有固定菜单

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 &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>

这里是对应的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 &gt;</li>
        <li>two is longer than one &gt;</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/