Textüberlauf Ellipse auf dynamischem width Element

Question

Ich habe einige Probleme, die versuchen, text-overflow: ellipsis zu erhalten, um an einem Element mit einer dynamischen Breite zu arbeiten. Ich habe mir andere Lösungen angeschaut, aber alle scheinen eine Art von statischer Breite zu verwenden, während ich hoffe, eine völlig dynamische Lösung zu erreichen. Javascript ist eine Option, aber würde es vorziehen, es zu CSS wenn möglich zu behalten. Ich habe auch die Einschränkung, dass jede Lösung mit IE8 kompatibel ist. Unten ist was ich bisher habe.

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

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

Im Idealfall möchte ich das Element mit der Klasse von .bar die verbleibende Breite von .col-3 aufzunehmen. Jeder Schub in die richtige Richtung würde sehr geschätzt werden. Hier auch ein Link zu einem JSFiddle. Vielen Dank!

Answer 1

Fügen Sie einfach max-width: 100% zu dem Element hinzu, um zu erreichen, wonach Sie suchen. Der Grund, dass Sie eine Art von Breitensatz brauchen, ist, dass das Element weiter expandiert, bis Sie ihm sagen, dass es nicht möglich ist.

Hier ist ein JSFiddle Example.

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

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

Bearbeiten - Flexbox Ausgabe

So, hier ist ein Flexbox Display. Du wirst für IE8 mit einer Bibliothek wie diese müssen Shim: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

Hier ist die Lösung für Browser, die nicht saugen:

SCSS aktualisieren

.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