我创建了一个JSFiddle,问题是
here
这适用于Firefox v33和v33.1,但是在34-35中失败了.这适用于Chrome和IE11.它可能是Firefox中的一个错误,但我不确定.基本上我有HTML看起来像这样：
.container {
position: absolute;
width: 150px;
}
.innercontainer {
position: relative;
padding-right: 25px;
margin-bottom: 10px;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
.outerwrapper {
display: block;
height: 24px;
text-align: center;
font-size: 10px;
line-height: 24px;
margin-bottom: 5px;
display: -webkit-Box;
display: -moz-Box;
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
Box-orient: horizontal;
-webkit-Box-orient: horizontal;
flex-direction: normal;
-ms-flex-direction: normal;
-moz-flex-direction: normal;
-webkit-flex-direction: normal;
}
.wrapper {
flex: 1;
-ms-flex: 1 0 auto;
-moz-flex: 1;
-webkit-flex: 1;
-webkit-Box-flex: 1;
display: -webkit-Box;
display: -moz-Box;
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
Box-orient: horizontal;
-webkit-Box-orient: horizontal;
flex-direction: normal;
-ms-flex-direction: normal;
-moz-flex-direction: normal;
-webkit-flex-direction: normal;
background-color: grey;
}
.wrapper span {
display: block;
flex: 1;
-ms-flex: 1;
-moz-flex: 1;
-webkit-flex: 1;
-webkit-Box-flex: 1;
text-align: left;
font-size: 10px;
padding: 0 5px;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
color: #FFFFFF;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="container">
<div class="innercontainer">
<section class="outerwrapper">
<div class="wrapper">
<span>
super long string in here super long string
in here super long string in here
</span>
</div>
</section>
</div>
</div>
对已经定型的CSS表示歉意;它在一个更大的Web应用程序中,它必须是这样的.
在Chrome中,你会得到“超长字符串……”,在Firefox中它只显示整个字符串.
解决方法
问题是
Flexible Box Layout引入了
Implied Minimum Size of Flex Items：
To provide a more reasonable default minimum size for flex items,this
specification introduces a new 07002 value as the initial value
of the 07003 and 07004 properties defined in
CSS 2.1.
除了之外,该自动值计算为0
on a 07005 whose 07006 is
visiblein the 07007,when specified on the flex item’s main-axis min-size
property
在您的情况下,主轴是水平轴.因此,如果将overflow-x设置为除可见之外的任何值,则min-width将计算为0,这是引入auto之前的初始值.
例如,
.wrapper {
overflow: hidden;
}
.container {
position: absolute;
width: 150px;
}
.innercontainer {
position: relative;
padding-right: 25px;
margin-bottom: 10px;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
.outerwrapper {
display: block;
height: 24px;
text-align: center;
font-size: 10px;
line-height: 24px;
margin-bottom: 5px;
display: -webkit-Box;
display: -moz-Box;
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
Box-orient: horizontal;
-webkit-Box-orient: horizontal;
flex-direction: normal;
-ms-flex-direction: normal;
-moz-flex-direction: normal;
-webkit-flex-direction: normal;
}
.wrapper {
flex: 1;
-ms-flex: 1 0 auto;
-moz-flex: 1;
-webkit-flex: 1;
-webkit-Box-flex: 1;
display: -webkit-Box;
display: -moz-Box;
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
Box-orient: horizontal;
-webkit-Box-orient: horizontal;
flex-direction: normal;
-ms-flex-direction: normal;
-moz-flex-direction: normal;
-webkit-flex-direction: normal;
background-color: grey;
overflow: hidden;
}
.wrapper span {
display: block;
flex: 1;
-ms-flex: 1;
-moz-flex: 1;
-webkit-flex: 1;
-webkit-Box-flex: 1;
text-align: left;
font-size: 10px;
padding: 0 5px;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
color: #FFFFFF;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="container">
<div class="innercontainer">
<section class="outerwrapper">
<div class="wrapper">
<span>
super long string in here super long string
in here super long string in here
</span>
</div>
</section>
</div>
</div>
