如何防止flex项目因文本而溢出？

Question

我列出了以下布局。每个列表项由两列表示。第二列应占用所有可用空间，但如果第一列占用太多空间，则应以最小大小固定在右侧。然后第一列应显示省略号。

问题出现在最后一个案例中。当第一列包含太多文本而不是显示省略号时，它会将自身伸展出弹性框，导致出现水平滚动条，而第二列不会固定在右侧。

我想让它像这样呈现（模型）：

我怎样才能做到这一点？

这是sample fiddle。

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}

<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

Answer 1

更新

添加有效的代码：

.container {
    display: -webkit-flex; 
}

.container>div:first-child{
    white-space:nowrap;
   -webkit-order:1;
   -webkit-flex: 0 1 auto; /*important*/
    text-overflow: ellipsis;
    overflow:hidden;
    min-width:0; /* new algorithm overrides the width calculation */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
    white-space:normal;
}

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div><div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

原始答案/解释。

W3C规范说，“默认情况下，弹性项目不会缩小到最小内容大小（最长单词或固定大小元素的长度）之下。要更改此项，请设置'min-width'或'min-height'属性。“

如果我们按照这种推理方式，我相信该错误已从Canary中移除，而不是相反。

我将min-width加到0后立即检查，它可以在金丝雀中使用。

因此bug在较早的实现中，并且canary删除了该bug。

此示例适用于金丝雀。 http://jsfiddle.net/iamanubhavsaini/zWtBu/

我使用谷歌Chrome版本23.0.1245.0金丝雀。

Answer 2

您可以通过将flex属性的第三个值设置为auto来设置子项的首选大小，如下所示：

flex: 1 0 auto;

这是设置flex-basis property。

的简写

（Example）

正如评论中所述，这似乎在Chrome Canary中不起作用，但我不确定原因。

Answer 3

更新：这不是答案。它解决了不同的问题，这是找到真正答案的一步。所以我保留它是出于历史原因。请不要投票。

我相信这是你的答案：http://jsfiddle.net/iamanubhavsaini/zWtBu/2/

参考W3C

表示第一个元素

-webkit-flex: 0 1 auto; /* important to note */

和 对于第二个元素

-webkit-flex:1 0 auto; /* important to note */

是完成这一操作的属性和值。

在http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex

了解详情

---

这就是你颠倒顺序的方式：http://jsfiddle.net/iamanubhavsaini/zWtBu/3/

并且这个具有预定义的最小宽度为red-backgrounded-thingy：http://jsfiddle.net/iamanubhavsaini/zWtBu/1/

Answer 4

更新：这不是答案。它解决了不同的问题，这是找到真正答案的一步。所以我保留它是出于历史原因。请不要投票。

编辑2：这个答案没有解决问题。问题的目标与答案之间存在细微差别。

首先，text-overflow:ellipsis与overflow:hidden一起使用。实际上，它适用于除overflow:visible之外的任何内容。Ref

然后，迭代：

http://jsfiddle.net/iamanubhavsaini/QCLjt/8/

在这里，我添加了overflow和max-width属性。 max-width:60%;和overflow:hidden是按预期显示内容的原因，因为hidden会停止显示文本，60%实际上会创建一个确定大小的框，以防文本太多数据

然后，如果您对弹性框模型真的感兴趣，请参阅-webkit-order。

http://jsfiddle.net/iamanubhavsaini/QCLjt/9/

- 代码 -

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

关注CSS

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
.container>div:first-child{
   -webkit-order:1;
        -webkit-flex: 1;
}
.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
}

- 没有宽度，仍然有效。这就是我所看到的。

- 评论后

-webkit-order：N; 是我们将在2年以上而不是float:---;使用的内容以及更多的黑客攻击（如果W3C留在此课程中，如果每个浏览器供应商关注）

这里，左边的div为1，右边的div为2。因此，他们是左派。

http://jsfiddle.net/iamanubhavsaini/QCLjt/10/

这里也是一样，但只有当你正在寻找右 - 左，只需改变事物的顺序为div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}

注意：这种-webkit-flex方式显然会使这些代码在其他引擎上无效。因为，应该使用多个浏览器引擎float来重用代码。

下面是一些JS示例;不回答问题 - 后评论

我认为这回答了你的问题以及更多的问题，还有其他一些方法和不同的解决方案，但不完全是这个问题的解决方案。 http://jsfiddle.net/iamanubhavsaini/vtaY8/1/ http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/ http://jsfiddle.net/iamanubhavsaini/33v8g/4/ http://jsfiddle.net/iamanubhavsaini/33v8g/1/

Answer 5

对于mozilla，你应该添加“min-width：1px;”

Answer 6

这个例子对我有帮助：http://jsfiddle.net/laukstein/LLNsV/

container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}

.container>div {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

Answer 7

你应该使容器位置：relative和child position：absolute。