Позволяет одному div сжиматься при необходимости

Question

Прошу прощения, если это дубликат, но до сих пор мне не удалось найти что-либо, что работает.

У меня есть липкая панель навигации с некоторыми панировочными сухарями и т. Д., И при определенных обстоятельствах один из предметов может иметь очень длинное имя. Это заставляет предметы, находящиеся в крайнем правом положении, опускаться на меньшие экраны.

Вот что насмешливо, что происходит.

Я хочу, чтобы действительно длинный участок линии мог сжиматься в тех случаях, когда он попадал в другие, всегда имея имя пользователя и «выход из системы» на одной линии с остальными. Когда длинный заголовок слишком длинный, он должен усекать и использовать эллипсы.

 <div id="topNav" > 
      <div class="toolBar"> 
       <div class="leftTools"> 
        <div class=""> 
         <span class="icon-group glyphicon"></span> 
         <a asp-area="" asp-controller="Home" asp-action="index">Base</a> 
        </div> 
        <div id="breadcrumb" class="">        
         <a class="listPageLink" href=""> 
          <span class="icon-carrot-right glyphicon"></span> 
          <span class="linkText">Type</span> 
         </a>        
         <a class="itemPageLink" href=""> 
          <span class="icon-carrot-right glyphicon"></span> 
          <span class="linkText">stupid really long title for something wow is this name way too long to be useful for anything</span> 
         </a>        
         <a class="subCatPageLink" href=""> 
          <span class="icon-carrot-right glyphicon"></span> 
          <span class="linkText">subcat</span> 
         </a>        
        </div> 
       </div>      
       <div class="rightTools"> 
        <div class=""> 
         <a>@User.GetName()</a> 
         @if (User.Identity.IsAuthenticated) 
         { 
          <a asp-area="" asp-controller="Home" asp-action="Logout">Logout</a> 
         } 
        </div> 
       </div>      
      </div> 
      <div class="fadeBorder"></div> 
     </div> 

Что я не хочу: Я не хочу, чтобы использовать JavaScript (если это вообще возможно), только CSS. Я не хочу писать кучу медиа-запросов для разных экранов. Я бы предпочел не использовать css calc, но если это единственный способ, то это нормально.

Как это сделать?

Редактировать: Вот jsfiddle основной идеи. https://jsfiddle.net/1h4maehs/

Edit2: Это codepen лучший exaple: http://codepen.io/Nurdyguy/pen/dpdwGb

Answer 1

Flexbox и text-overflow:ellipsis может помочь, но это потребует от вас указать, какие элементы вы не хотят сокращаться.

Как так:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    white-space: nowrap; 
 
    margin-bottom: 1em; 
 
} 
 
li { 
 
    padding: 1em; 
 
    white-space: nowrap; 
 
    border: 1px solid green; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    flex: 0 1 auto; 
 
} 
 
.no-shrink { 
 
    flex-shrink: 0; 
 
} 
 
.right { 
 
    margin-left: auto; 
 
}

<div class="wrap"> 
 
    <ul> 
 
    <li class="no-shrink">lorem</li> 
 
    <li class="no-shrink">Lorem</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, facere.</li> 
 
    <li class="no-shrink">lorem</li> 
 
    <li class="no-shrink">lorem</li> 
 
    </ul> 
 
</div> 
 

 
<div class="wrap"> 
 
    <ul> 
 
    <li class="no-shrink">lorem</li> 
 
    <li class="no-shrink">Lorem</li> 
 
    <li>Lorem ipsum dolor sit amet</li> 
 
    <li class="no-shrink right">lorem</li> 
 
    <li class="no-shrink">lorem</li> 
 
    </ul> 
 
</div>

Как уже упоминалось в комментариях, вы можете также создать «поплавок: right` вариант, если требуется, за последние пару пунктов

.

Answer 2

Лично я бы реализовать text-overflow: ellipsis;, давая каждому Иерархическая максимальное количество пространства каждый может принять. Если они превышают его, добавьте многоточие и спрячьте остальное.

.item { 
 
    display: inline-block; 
 
    max-width: 25%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.divider { 
 
    vertical-align: top; 
 
}

<div class="breadcrumb"> 
 
    <span class="item">Apple</span> 
 
    <span class="divider">></span> 
 
    <span class="item">Banana</span> 
 
    <span class="divider">></span> 
 
    <span class="item">Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry Cranberry</span> 
 
    <span class="divider">></span> 
 
    <span class="item">Doh!</span> 
 
</div>