忽略 nowrap 的 Firefox 文本溢出(Chrome 有效) [英] Firefox text-overflow with nowrap ignored (Chrome works)

问题描述

我在此处

创建了一个 JSFiddle 问题

这适用于 Firefox v33 和 v33.1，但在 34-35 中失败.这在 Chrome 和 IE11 中正常工作.这可能是 Firefox 中的一个错误，但我不确定.基本上我的 HTML 如下所示:

.container {位置:绝对；宽度:150px；}.innercontainer {位置:相对；右填充:25px；底边距:10px；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.外包装{显示:块；高度:24px；文本对齐:居中；字体大小:10px；行高:24px；底边距:5px；显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；box-orient:水平；-webkit-box-orient:水平；弹性方向:正常；-ms-flex-direction:正常；-moz-flex-direction:正常；-webkit-flex-direction:正常；}.包装{弹性:1；-ms-flex:1 0 自动；-moz-flex: 1;-webkit-flex: 1;-webkit-box-flex: 1;显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；box-orient:水平；-webkit-box-orient:水平；弹性方向:正常；-ms-flex-direction:正常；-moz-flex-direction:正常；-webkit-flex-direction:正常；背景颜色:灰色；}.wrapper 跨度{显示:块；弹性:1；-ms-flex: 1;-moz-flex: 1;-webkit-flex: 1;-webkit-box-flex: 1;文本对齐:左；字体大小:10px；填充:0 5px；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；颜色:#FFFFFF；文本溢出:省略号；空白:nowrap；溢出:隐藏；}

<div class="innercontainer"><section class="外包装"><div class="wrapper"><跨度>超长字符串在这里超长字符串在这里超长字符串在这里</span>
</节>

为混乱的 CSS 道歉；它在一个更大的网络应用程序中，它必须是这样.

在 Chrome 中你会得到这里的超长字符串......"，而在 Firefox 中它只显示整个字符串.

解决方案

问题在于 Flexible Box Layout 介绍了 隐含Flex 项目的最小尺寸:

<块引用>

为了为弹性项目提供更合理的默认最小尺寸，这规范引入了新的auto 值作为初始值min-width 和 min-height 属性定义在CSS 2.1.

那个 auto 值计算为 0，除了

<块引用>

在 flex item 上，其 overflow 在 visiblea href="http://dev.w3.org/csswg/css-flexbox/#main-axis" rel="nofollow">main轴，当在弹性项目的主轴上指定时最小尺寸财产

在您的情况下，主轴是水平轴.因此，如果您将 overflow-x 设置为 visible 以外的任何值，min-width 将计算为 0，即是引入 auto 之前的初始值.

例如

.wrapper {溢出:隐藏；}

.container {位置:绝对；宽度:150px；}.innercontainer {位置:相对；右填充:25px；底边距:10px；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.外包装{显示:块；高度:24px；文本对齐:居中；字体大小:10px；行高:24px；底边距:5px；显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；box-orient:水平；-webkit-box-orient:水平；弹性方向:正常；-ms-flex-direction:正常；-moz-flex-direction:正常；-webkit-flex-direction:正常；}.包装{弹性:1；-ms-flex:1 0 自动；-moz-flex: 1;-webkit-flex: 1;-webkit-box-flex: 1;显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；box-orient:水平；-webkit-box-orient:水平；弹性方向:正常；-ms-flex-direction:正常；-moz-flex-direction:正常；-webkit-flex-direction:正常；背景颜色:灰色；溢出:隐藏；}.wrapper 跨度{显示:块；弹性:1；-ms-flex: 1;-moz-flex: 1;-webkit-flex: 1;-webkit-box-flex: 1;文本对齐:左；字体大小:10px；填充:0 5px；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；颜色:#FFFFFF；文本溢出:省略号；空白:nowrap；溢出:隐藏；}

<div class="innercontainer"><section class="外包装"><div class="wrapper"><跨度>超长字符串在这里超长字符串在这里超长字符串在这里</span>
</节>

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>

这篇关于忽略 nowrap 的 Firefox 文本溢出(Chrome 有效)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！