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：horizo​​ntal; -webkit-box-orient：horizo​​ntal; 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：horizo​​ntal; -webkit-box-orient：horizo​​ntal; 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 ，除了

< org / csswg / css-flexbox /＃flex-itemrel =nofollow> flex item ，其 c> c> //dev.w3.org/csswg/css-flexbox/#main-axisrel =nofollow> main
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：horizo​​ntal; -webkit-box-orient：horizo​​ntal; 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：horizo​​ntal; -webkit-box-orient：horizo​​ntal; 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 the min-width and min-height properties defined in CSS 2.1.

That auto value computes to 0, except

on a flex item whose overflow is visible 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屋！