Menu
I'm trying to set up a flexbox layout with three columns. The left and right columns have a fixed width. The center column has fluid width to fill the available space, but it contains a long text, which should not be wrapped and use ellipsis instead.
Unfortunately, non-wrapped text does not provide ability for a column to take available space and pushes the whole layout beyond borders of a parent element.
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 to fiddle: http://jsfiddle.net/2Lp8d80n/
Any help is appreciated.
773
Enable or disable text wrapping for a text box, rich text box, or expression box. Right-click the control for which you want to enable or disable text wrapping, and then click Control Properties on the shortcut menu. Click the Display tab. Select or clear the Wrap text check box.
If you are using flexbox and want the content to wrap, you must specify flex-wrap: wrap . By default flex items don't wrap. To have the images be three-across, you should specify flex-basis: 33.33333% .
As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.
You'll have to wrap your text in its own container. Since your <img> is floated to the left, you can use overflow: hidden on your newly-added container to achieve no wrapping of the text.
You can just add flex: 1 and overflow: hidden on .center column.
Also when you set flex: 0 0 350px; there is no need to define width, width is fixed to 350px, or that is flex-basis in this case.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
