google-chrome - 如何防止弹性项目由于其文本而溢出？

Question

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

问题发生在最后一种情况下。当第一列包含太多文本时，它没有显示省略号，而是将自身拉伸到弹性框之外，导致出现水平滚动条，并且第二列没有锚定在右侧。

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

我怎样才能做到这一点？

这是 样品小提琴。

.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'财产。 ”

如果我们按照这个推理，我相信这个 bug 已经从 Canary 中删除了，而不是相反。

我一输入就检查min-width，0它在 Canary 中有效。

所以错误存在于较旧的实现中，而金丝雀删除了该错误。

这个例子在金丝雀中工作。http://jsfiddle.net/iamanubhavsaini/zWtBu/

我使用了 Google Chrome 版本 23.0.1245.0 金丝雀。

Answer 2

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

flex: 1 0 auto;

这是设置flex-basis 属性的简写。

（例）

然而，正如评论中所指出的，这在 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/

而这个具有红色背景的东西的预定义最小宽度：http: //jsfiddle.net/iamanubhavsaini/zWtBu/1/

Answer 4

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

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

首先，text-overflow:ellipsis与overflow:hidden. 实际上，它适用于除overflow:visible. 参考

然后，遍历：

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

在这里，我有 putoverflow和max-width属性。max-width:60%;并且overflow:hidden是使事物按照您的意图出现的原因，因为在文本数据过多的情况下hidden阻止文本显示并实际创建确定大小的框。60%

然后，如果您真的对flex box 模型感兴趣，可以通过-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-订单：N；是我们将在 2 年多之后使用的东西，而不是float:---;更多的 hack（如果 W3C 坚持这个课程，并且如果每个浏览器供应商都遵循）

在这里，左 div 的 order 为 1，右 div 的 order 为 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/伊玛努巴夫赛尼/33v8g/1/

Answer 5

对于Mozilla，您应该添加“最小宽度：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

您应该使容器位置：相对，子位置：绝对。