忽略 nowrap 的 Firefox 文本溢出(Chrome 有效)
Firefox text-overflow with nowrap ignored (Chrome works)
我创建了一个有问题的 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;它在一个更大的网络应用程序中,它必须是这样的。
在 Chrome 中你得到 "super long string in here ...",而在 Firefox 中它只显示整个字符串。
问题是 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 the min-width
and min-height
properties defined in
CSS 2.1.
auto
值计算为 0
,除了
on a flex item whose overflow
is visible
in the main
axis, when specified on the flex item’s main-axis min-size
property
在你的例子中,主轴是水平的。因此,如果您将 overflow-x
设置为 visible
以外的任何值,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>
比这里的其他解决方案更有效(和直接)——只需将 min-width
设置为 0。
.wrapper {
min-width:0;
}
(这比 overflow:hidden
好,因为设置 overflow
会使浏览器在后台创建一个可滚动区域,这会消耗内存。)
有关 Firefox 34 为何需要此功能的更多信息,请参阅 my answer on this other question。(它来自 flexbox 规范更改,目前仅在 Firefox 中提供。)
.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;
min-width:0;
}
.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>
我创建了一个有问题的 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;它在一个更大的网络应用程序中,它必须是这样的。
在 Chrome 中你得到 "super long string in here ...",而在 Firefox 中它只显示整个字符串。
问题是 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.
auto
值计算为 0
,除了
on a flex item whose
overflow
isvisible
in the main axis, when specified on the flex item’s main-axis min-size property
在你的例子中,主轴是水平的。因此,如果您将 overflow-x
设置为 visible
以外的任何值,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>
比这里的其他解决方案更有效(和直接)——只需将 min-width
设置为 0。
.wrapper {
min-width:0;
}
(这比 overflow:hidden
好,因为设置 overflow
会使浏览器在后台创建一个可滚动区域,这会消耗内存。)
有关 Firefox 34 为何需要此功能的更多信息,请参阅 my answer on this other question。(它来自 flexbox 规范更改,目前仅在 Firefox 中提供。)
.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;
min-width:0;
}
.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>