Firefox text-overflow with nowrap ignored(Chrome works) [英] Firefox text-overflow with nowrap ignored (Chrome works)
问题描述
我在这里创建了一个JSFiddle。
这在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;显示:-webkit-box;显示:-moz-box; display:-ms-flexbox;显示:-webkit-flex;显示:flex; box-orient:horizontal; -webkit-box-orient:horizontal; flex-direction:正常; -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;显示:-webkit-box;显示:-moz-box; display:-ms-flexbox;显示:-webkit-flex;显示:flex; box-orient:horizontal; -webkit-box-orient:horizontal; flex-direction:正常; -ms-flex-direction:normal; -moz-flex-direction:normal; -webkit-flex-direction:normal; background-color:gray;}。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 = > < div class =innercontainer> < section class =outerwrapper> < div class =wrapper> < span>超长字符串在这里超长字符串在这里超长字符串在这里< / span> < / div> < / section> < / div>< / div>
计算CSS;
在Chrome中,你会得到超长字符串在这里...,在Firefox中,它只是一个更大的web应用程序。显示整个字符串。
问题是弹性框布局介绍了 Flex项目的隐含最小尺寸:
Flex项目的默认最小大小,这个
规范引入了一个新的auto
值作为初始值
的min-width
和min-height
属性b $ b CSS 2.1。
auto
值计算为 0
,除了
,其 c> c> //dev.w3.org/csswg/css-flexbox/#main-axisrel =nofollow> main
< org / csswg / css-flexbox /#flex-itemrel =nofollow> flex item
axis ,当在flex项目的主轴最小大小上指定
property
在这种情况下,主轴是水平轴。因此,如果将 overflow-x
设置为除了 visible
, code>将计算
0
,这是在引入 auto
之前的初始值。
例如,
.wrapper {
overflow:hidden;
}
.container {position:绝对; 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;显示:-webkit-box;显示:-moz-box; display:-ms-flexbox;显示:-webkit-flex;显示:flex; box-orient:horizontal; -webkit-box-orient:horizontal; flex-direction:正常; -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;显示:-webkit-box;显示:-moz-box; display:-ms-flexbox;显示:-webkit-flex;显示:flex; box-orient:horizontal; -webkit-box-orient:horizontal; flex-direction:正常; -ms-flex-direction:normal; -moz-flex-direction:normal; -webkit-flex-direction:normal;背景颜色:灰色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 = > < div class =innercontainer> < section class =outerwrapper> < div class =wrapper> < span>超长字符串在这里超长字符串在这里超长字符串在这里< / span> < / div> < / section> < / div>< / div>
I have created a JSFiddle with the issue here
This worked on Firefox v33 and v33.1, however has been failing in 34-35. This works in Chrome and IE11 properly. It may be a bug in Firefox, but I'm not sure. Basically I have HTML that looks like this:
.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>
Apologies for the convulated CSS; it's in a much larger web application and it has to be this way.
In Chrome you get "super long string in here ...", and in Firefox it just shows the entire string.
The problem is that the Flexible Box Layout introduces the Implied Minimum Size of Flex Items:
To provide a more reasonable default minimum size for flex items, this specification introduces a new
auto
value as the initial value of themin-width
andmin-height
properties defined in CSS 2.1.
That auto
value computes to 0
, except
on a flex item whose
overflow
isvisible
in the main axis, when specified on the flex item’s main-axis min-size property
In your case, the main axis is the horizontal one. Therefore, if you set overflow-x
to anything but visible
, min-width
will compute to 0
, which was the initial value before auto
was introduced.
For example,
.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>
这篇关于Firefox text-overflow with nowrap ignored(Chrome works)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!