Question

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

链接到小提琴： http://jsfiddle.net/2Lp8d80n/

感谢任何帮助。

Answer 1

您只需在flex: 1列添加overflow: hidden和.center即可。

同样，当您设置flex: 0 0 350px;时，无需定义width，宽度固定为350px，或者在这种情况下为flex-basis。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Flexbox - 带有＆＃34;无包装的流体柱＆＃34;文本

1 个答案: