css – 忽略了nowrap的Firefox文本溢出(Chrome工作)

我创建了一个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 visible in 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>

原文地址：https://www.jb51.cc/css/217345.html