Flexbox - 带有 "no wrap" 文本的流体列
Flexbox - fluid column with "no wrap" text
我正在尝试设置具有三列的 flexbox 布局。左列和右列具有固定的宽度。中心列的宽度可变以填充可用的 space,但它包含一个长文本,不应将其换行,而是使用省略号。
遗憾的是,非换行文本无法让列可用 space 并将整个布局推到父元素的边界之外。
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 到 fiddle:
http://jsfiddle.net/2Lp8d80n/
感谢任何帮助。
您可以在 .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>
我正在尝试设置具有三列的 flexbox 布局。左列和右列具有固定的宽度。中心列的宽度可变以填充可用的 space,但它包含一个长文本,不应将其换行,而是使用省略号。
遗憾的是,非换行文本无法让列可用 space 并将整个布局推到父元素的边界之外。
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 到 fiddle: http://jsfiddle.net/2Lp8d80n/
感谢任何帮助。
您可以在 .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>