CSS 如何防止弹性项目因其文本而溢出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12022288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep a flex item from overflowing due to its text?
提问by pimvdb
I have the following layout in mind for a list. Each list item is represented by two columns. The second column should take up all available space, but it should be anchored to the right with its minimum size if the first column is taking up too much space. The first column should then show an ellipsis.
对于列表，我考虑了以下布局。每个列表项由两列表示。第二列应占用所有可用空间，但如果第一列占用太多空间，则应以其最小尺寸固定在右侧。第一列应该显示一个省略号。
The problem is happening in that last case. When the first column consists of too much text, instead of showing an ellipsis, it stretches itself out of the flexbox causing an horizontal scrollbar to appear, and the second column is not anchored to the right.
问题发生在最后一种情况。当第一列包含太多文本时，它不会显示省略号，而是将自身拉伸到 flexbox 之外，导致出现水平滚动条，而第二列不会固定在右侧。
I would like to have it rendered like this (mockup):
我想让它像这样呈现（模型）：
How can I achieve that?
我怎样才能做到这一点？
This is 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>回答by
UPDATE
更新
Adding code that works:
添加有效的代码：
.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>Original answer / explanation.
原始答案/解释。
W3C specification says, "By default, flex items won't shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the ‘min-width' or ‘min-height' property."
W3C 规范说，“默认情况下，弹性项目不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置 'min-width' 或 'min-height'财产。”
If we follow this line of reasoning, I believe the bug has been removed from Canary, not the other way round.
如果我们遵循这一推理思路，我相信该错误已从 Canary 中删除，而不是相反。
Check as soon as I put min-widthto 0, it works in Canary.
只要我把检查min-width到0，它工作在加那利。
So bug was in older implementations, and canary removes that bug.
所以 bug 出现在较旧的实现中，canary 删除了那个 bug。
This example is working in canary. http://jsfiddle.net/iamanubhavsaini/zWtBu/
这个例子在金丝雀中工作。http://jsfiddle.net/iamanubhavsaini/zWtBu/
I used Google Chrome Version 23.0.1245.0 canary.
我使用了谷歌浏览器版本 23.0.1245.0 金丝雀。
回答by Marcus Stade
You can set the preferred size of the child by setting the third value of the flexproperty to auto, like so:
您可以通过将flex属性的第三个值设置为 auto来设置孩子的首选大小，如下所示：
flex: 1 0 auto;
This is shorthand for setting the flex-basisproperty.
这是设置flex-basis属性的简写。
(Example)
（示例）
As noted in the comments however, this doesn't seem to work in Chrome Canary, although I'm not sure why.
然而，正如评论中所指出的，这在 Chrome Canary 中似乎不起作用，尽管我不确定为什么。
回答by Marcus Stade
Update: This is not the answer. It solves different problem, and it was a step in finding the real answer. So I am keeping it for the historical reasons. Please don't vote on it.
更新：这不是答案。它解决了不同的问题，这是找到真正答案的一步。所以我保留它是出于历史原因。请不要投票。
I believe this is your answer: http://jsfiddle.net/iamanubhavsaini/zWtBu/2/
我相信这是你的答案：http: //jsfiddle.net/iamanubhavsaini/zWtBu/2/
refer W3C
参考W3C
for the first element
对于第一个元素
-webkit-flex: 0 1 auto; /* important to note */
and for the second element
对于第二个元素
-webkit-flex:1 0 auto; /* important to note */
are the properties and values that do the trick.
是起作用的属性和值。
Read more at http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex
在http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex阅读更多
and this is how you reverse the order: http://jsfiddle.net/iamanubhavsaini/zWtBu/3/
这就是你颠倒顺序的方式：http: //jsfiddle.net/iamanubhavsaini/zWtBu/3/
and this one with the predefined minimum width of the red-backgrounded-thingy: http://jsfiddle.net/iamanubhavsaini/zWtBu/1/
这个具有红色背景物体的预定义最小宽度：http: //jsfiddle.net/iamanubhavsaini/zWtBu/1/
回答by Con Antonakos
This example really helped me: http://jsfiddle.net/laukstein/LLNsV/
这个例子真的帮助了我：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;
}
回答by Con Antonakos
Update: This is not the answer. It solves different problem, and it was a step in finding the real answer. So I am keeping it for the historical reasons. Please don't vote on it.
更新：这不是答案。它解决了不同的问题，这是找到真正答案的一步。所以我保留它是出于历史原因。请不要投票。
EDIT 2: This answer doesn't solve the problem. There is a subtle difference between target of the question and the answer.
编辑 2：这个答案不能解决问题。问题的目标和答案之间存在细微差别。
First of all, text-overflow:ellipsisworks with overflow:hidden. Actually, it works with anything other than overflow:visible.Ref
首先，text-overflow:ellipsis与overflow:hidden. 实际上，它适用于除overflow:visible. 参考
Then, iterate through:
然后，迭代：
http://jsfiddle.net/iamanubhavsaini/QCLjt/8/
http://jsfiddle.net/iamanubhavsaini/QCLjt/8/
Here, I have put overflowand max-widthproperties. max-width:60%;and overflow:hiddenis what makes things appear as you intended, as hiddenstops the text from displaying and 60%actually creates the box of definite size in case of too much text data.
在这里，我已经把overflow和max-width属性。max-width:60%;并且overflow:hidden是什么让事情如你所愿，因为hidden停止显示文本并60%在文本数据过多的情况下实际创建确定大小的框。
Then, if you are really interested in flex box modelhere's how things pan out via -webkit-order.
然后，如果你真的对flex box 模型感兴趣，这里是通过-webkit-order.
http://jsfiddle.net/iamanubhavsaini/QCLjt/9/
http://jsfiddle.net/iamanubhavsaini/QCLjt/9/
--code--
- 代码 -
<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>
?concerned CSS
?关注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;
}
?-- There is no width and still it works. And this is what I see.
?-- 没有宽度，但它仍然有效。这就是我所看到的。
--after comment
--评论后
-webkit-order:N;is the what we will be using after 2+ years instead of float:---;and many more hacks(if W3C stays on this course and also if every browser vendor follow)
-webkit-order:N; 是我们在 2 年后将使用的而不是float:---;更多的黑客（如果 W3C 继续这个过程，并且如果每个浏览器供应商都遵循）
here, order is 1 for the left div and 2 for the right div. thus, they are Left-Right.
此处，左侧 div 的顺序为 1，右侧 div 的顺序为 2。因此，他们是左-右。
http://jsfiddle.net/iamanubhavsaini/QCLjt/10/
http://jsfiddle.net/iamanubhavsaini/QCLjt/10/
same thing here, but only if you are looking for Right-Left, just change the order of the things as div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}
同样的事情，但只有当你在寻找右-左时，只需将事物的顺序更改为 div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}
NOTE: this -webkit-flexway of doing things obviously renders this code useless on other engines. For, reuse of code, on multiple browser engines floating should be used.
注意：这种处理-webkit-flex方式显然会使此代码在其他引擎上无用。对于代码重用，float应该在多个浏览器引擎上使用。
below are some JS examples; that doesn't answer the question-after comment
下面是一些 JS 示例；没有回答问题- 评论后
I think this answers your question and many more to come, there are some other ways and different solutions but not exactly the solution for this question. http://jsfiddle.net/iamanubhavsaini/vtaY8/1/http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/http://jsfiddle.net/iamanubhavsaini/33v8g/4/http://jsfiddle.net/iamanubhavsaini/33v8g/1/
我认为这回答了你的问题，还有更多的问题，还有一些其他的方法和不同的解决方案，但不完全是这个问题的解决方案。 http://jsfiddle.net/iamanubhavsaini/vtaY8/1/ http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/ http://jsfiddle.net/iamanubhavsaini/33v8g/4/ http://jsfiddle.net/ iamanubhavsaini/33v8g/1/
回答by goksel
for mozilla you should add "min-width: 1px;"
对于 mozilla，你应该添加“min-width: 1px;”
回答by Radu Brehar
You should make the container position: relative and the child position: absolute.
您应该使容器位置：相对和子位置：绝对。
