Flexbox - 带“无包装”文本的流体柱

Question

我试图设置带三列的flexbox布局。左列和右列具有固定的宽度。中间的列有流体宽度来填充可用空间，但是它包含一个长文本，不应该打包并使用省略号。

不幸的是，未包裹的文本不能提供列的可用空间并将整个布局推送到父元素的边界之外。

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>

链接拨弄： http://jsfiddle.net/2Lp8d80n/

任何帮助表示赞赏。

Answer 1

您可以在.center列上添加flex: 1和overflow: hidden列。

此外，当您设置flex: 0 0 350px;没有必要定义width，宽度是固定的，以350px，或者说是在这种情况下flex-basis。

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>