沒有換行符的導航欄，右邊的調整大小的麪包屑和右邊的固定菜單

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

利用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所以它縮放每個項目向下相等和導航欄白色空間現在，所有的東西都保持在一條線上。

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

Answer 2

如果你可以移動div.user前<OL>這裏是一個解決方案您。它基於使列表項顯示：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>