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

Question

我在这里创建了一个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;
  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中它只显示整个字符串.

Answer 1

比其他解决方案更有效(和更直接) - 只需设置min-width为0.

.wrapper {
    min-width:0;
}

(这比overflow:hidden设置更好,因为设置overflow会使浏览器在引擎盖下创建一个可滚动区域,这会占用内存成本.)

请参阅我在这个问题上的答案,了解更多关于为什么在Firefox 34中需要这个问题的答案.(这是来自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>