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>