Przepełnienie tekstu w elipsie na dynamicznym elemencie szerokości

Question

Mam pewne problemy, próbując uzyskać text-overflow: ellipsis pracę z elementem o dynamicznej szerokości. Przyjrzałem się innym rozwiązaniom, ale wszystkie wydają się wykorzystywać pewną formę statycznej szerokości, gdzie mam nadzieję osiągnąć całkowicie dynamiczne rozwiązanie. JavaScript jest opcją, ale wolałby, jeśli to możliwe, zachować CSS. Mam również ograniczenie każdego rozwiązania, które jest kompatybilne z IE8. Poniżej jest to, co mam do tej pory.

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; 
    } 
} 

Idealnie chciałbym element z klasą .bar do objęcia pozostałej szerokości .col-3. Każde uderzenie w odpowiednim kierunku zostanie bardzo docenione. Tutaj także link do JSFiddle. Dzięki!

Answer 1

Wystarczy dodać max-width: 100% do elementu, aby osiągnąć to, czego szukasz. Powodem, dla którego potrzebujesz jakiegoś zestawu szerokości, jest to, że element będzie się rozszerzał, aż powiesz mu, że nie może.

Oto .

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

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

Edit - edycja schematu flexbox

Więc oto wyświetlacz schematu flexbox. Będziesz musiał adapter do IE8 przy użyciu biblioteki tak: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

Oto dylemat dla przeglądarek, które nie ssać:

SCSS Aktualizacja

.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