如何防止 flex 项目因其文本而溢出?
[英] How to keep a flex item from overflowing due to its text?
本文介绍了如何防止 flex 项目因其文本而溢出?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我为列表考虑了以下布局.每个列表项由两列表示.第二列应占用所有可用空间，但如果第一列占用太多空间，则应以其最小尺寸固定在右侧.第一列应该显示一个省略号.
问题发生在最后一种情况.当第一列包含太多文本时，它不会显示省略号，而是将自身拉伸到 flexbox 之外，导致出现水平滚动条，而第二列没有固定在右侧.
我想把它渲染成这样(模型):
我怎样才能做到这一点?
这是示例小提琴.
.container {显示:-webkit-flex；}div {空白:nowrap；文本溢出:省略号；}.container >div:最后一个孩子{-webkit-flex: 1;背景:红色；}
<!-- 一个小的第一列；第二列按预期占用空间 --><div class="容器"><div>foo barfoo bar</div><div>foo bar</div>
<!-- 大的第一列；第一列溢出 flexbox 容器 --><div class="容器"><div>foo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo bar</div><div>foo bar</div>
解决方案
UPDATE
添加有效的代码:
.container {显示:-webkit-flex；}.container>div:first-child{空白:nowrap;-webkit-order:1;-webkit-flex:0 1 自动；/*重要的*/文本溢出:省略号；溢出:隐藏；最小宽度:0;/* 新算法覆盖宽度计算 */}.container >div:最后一个孩子{-webkit-flex: 1;-webkit-order:2;背景:红色；-webkit-flex:1 0 自动；/*重要的*/}.container >div:第一个孩子:悬停{空白:正常；}
<div>foo barfoo bar</div><div>foo bar</div>
<div class="容器"><div>foo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo bar</div><div>foo bar</div>
<div class="容器"><div>foo barfoo bar</div><div>foo bar</div>
<div class="容器"><div>foo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo barfoo 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>
原始答案/解释.
W3C 规范说，默认情况下，弹性项目不会缩小到其最小内容大小(最长单词或固定大小元素的长度)以下.要更改此设置，请设置 'min-width'或 'min-height' 属性."
如果我们按照这个推理思路，我相信该错误已从 Canary 中删除，而不是相反.
在我将 min-width 设置为 0 后立即检查，它在 Canary 中有效.
所以错误是在旧的实现中，金丝雀删除了那个错误.
这个例子在金丝雀中工作.http://jsfiddle.net/iamanubhavsaini/zWtBu/
我使用的是 Google Chrome 版本 23.0.1245.0 canary.
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.
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>
解决方案
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."
If we follow this line of reasoning, I believe the bug has been removed from Canary, not the other way round.
Check as soon as I put min-width to 0, it works in Canary.
So bug was in older implementations, and canary removes that bug.
This example is working in canary. http://jsfiddle.net/iamanubhavsaini/zWtBu/
I used Google Chrome Version 23.0.1245.0 canary.
这篇关于如何防止 flex 项目因其文本而溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
