Flexbox - Flüssigkeitssäule mit "no wrap" -Text

Question

Ich versuche ein Flexbox-Layout mit drei Spalten einzurichten. Die linke und rechte Spalte haben eine feste Breite. Die mittlere Spalte hat eine flüssige Breite, um den verfügbaren Platz zu füllen, aber sie enthält einen langen Text, der nicht umgebrochen werden sollte und stattdessen Ellipsen verwendet.

Leider bietet nicht umbrochener Text keine Möglichkeit für eine Spalte, verfügbaren Platz zu belegen, und schiebt das gesamte Layout über die Grenzen eines übergeordneten Elements hinaus.

img { 
 
    max-width: 100%; 
 
} 
 
#container { 
 
    display: flex; 
 
    max-width: 900px; 
 
} 
 
.column.left { 
 
    width: 350px; 
 
    flex: 0 0 350px; 
 
} 
 
.column.right { 
 
    width: 350px; 
 
    flex: 0 0 350px; 
 
} 
 
.column.center { 
 
    // fluid width required 
 
} 
 

 
h1 { 
 
white-space: nowrap; 
 
overflow: hidden; 
 
text-overflow: ellipsis; 
 
}

<div id="container"> 
 
    <div class="column left"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""> 
 
    </div> 
 
    <div class="column center"> 
 
    <h1> 
 
    This is long text. If overflow use ellipsis 
 
    </h1> 
 
    </div> 
 
    <div class="column right"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""> 
 
    </div> 
 
</div>

Link zu fummeln: http://jsfiddle.net/2Lp8d80n/

Jede Hilfe sehr geschätzt wird.

Answer 1

Sie können einfach flex: 1 und overflow: hidden auf .center Spalte hinzufügen.

Auch wenn Sie flex: 0 0 350px; dort eingestellt ist keine Notwendigkeit width zu definieren, Breite 350px festgelegt ist, oder das ist flex-basis in diesem Fall.

img { 
 
    max-width: 100%; 
 
} 
 
#container { 
 
    display: flex; 
 
    max-width: 900px; 
 
} 
 
.column.left { 
 
    flex: 0 0 350px; 
 
} 
 
.column.right { 
 
    flex: 0 0 350px; 
 
} 
 
.column.center { 
 
    flex: 1; 
 
    overflow: hidden; 
 
} 
 
h1 { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div id="container"> 
 
    <div class="column left"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""> 
 
    </div> 
 
    <div class="column center"> 
 
    <h1> 
 
    LONG LONG TEXT LONG LONG TEXT LONG LONG TEXT 
 
    </h1> 
 
    </div> 
 
    <div class="column right"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""> 
 
    </div> 
 
</div>