Эллипсис переполнения текста на элемент динамической ширины

Question

У меня возникли проблемы с получением text-overflow: ellipsis для работы с элементом с динамической шириной. Я рассмотрел другие решения, но все они, похоже, используют некоторую форму статической ширины, где я надеюсь достичь полностью динамичного решения. Javascript - это вариант, но, по возможности, предпочтет сохранить его в CSS. У меня также есть ограничение любого решения, совместимого с IE8. Ниже я до сих пор.

HTML-:

<div class="container"> 
    <div class="col-1 cell"> 
     <h1>Title</h1> 
    </div> 
    <div class="col-2 cell"> 
     <nav> 
      <ul> 
       <li><a href="#">Main #1</a></li> 
       <li><a href="#">Main #2</a></li> 
       <li><a href="#">Main #3</a></li> 
       <li><a href="#">Main #4</a></li> 
       <li><a href="#">Main #5</a></li> 
      </ul> 
     </nav> 
    </div> 
    <div class="col-3 cell"> 
     <div class="foo"> 
      <img src="http://placehold.it/50x50" alt=""> 
     </div> 
     <div class="bar"> 
      Some overly long title that should be ellipsis 
     </div> 
     <div class="baz"> 
      v 
     </div> 
    </div> 
</div> 

SCSS:

.container { 
    border: 1px solid #ccc; 
    display: table; 
    padding: 30px 15px; 
    table-layout: fixed; 
    width: 100%; 
} 

.cell { 
    display: table-cell; 
    vertical-align: middle; 
} 

.col-1 { 
    width: 25%; 

    h1 { 
     margin: 0; 
     padding: 0; 
    } 
} 

.col-2 { 
    width: 50%; 

    ul { 
     margin: 0; 
     padding: 0; 
    } 

    li { 
     float: left; 
     list-style: none; 
     margin-right: 10px; 
    } 
} 

.col-3 { 
    width: 25%; 

    .foo { 
     float: left; 

     img { 
      display: block; 
      margin: 0; 
      padding: 0; 
     } 
    } 

    .bar { 
     float: left; 
     height: 50px; 
     line-height: 50px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
    } 

    .baz { 
     background: #ccc; 
     float: left; 
     height: 50px; 
     line-height: 50px; 
     padding: 0 5px; 
    } 
} 

В идеале я хотел бы элемент с классом .bar занять оставшуюся ширину .col-3. Любое толчок в правильном направлении будет очень признателен. Здесь также ссылка на JSFiddle. Благодаря!

Answer 1

Просто добавьте max-width: 100% к элементу, чтобы достичь того, что вам нужно. Причина, по которой вам нужен какой-то набор ширины, заключается в том, что элемент будет продолжать расширяться, пока вы не скажете, что он не может.

Вот JSFiddle Example.

.bar { 
    float: left; 
    height: 50px; 
    line-height: 50px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 

    /* new css */ 
    max-width: 100%; 
} 

Edit - Flexbox издание

Так вот дисплей Flexbox. Вы будете нуждаться, чтобы Призонная шайба для IE8 с помощью библиотеки, как это: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

Вот исправление для браузеров, которые не сосут:

SCSS Update

.container { 
    border: 1px solid #ccc; 
    display: flex; 
    flex-direction: row; 
    padding: 30px 15px; 
    width: 100%; 
} 
.cell { 
    flex: 1 1 33%; 
    vertical-align: middle; 
} 
.col-3 { 
    width: 25%; 
    display: flex; 
    flex-direction: row; 

    .foo { 
     flex: 0 1 auto; 

     img { 
      display: block; 
      margin: 0; 
      padding: 0; 
     } 
    } 

    .bar { 
     height: 50px; 
     line-height: 50px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     flex: 1 2 auto; 
    } 

    .baz { 
     background: #ccc; 
     height: 50px; 
     line-height: 50px; 
     padding: 0 5px; 
     flex: 1 1 auto; 
    } 
} 

JSFiddle Example