学步园

标准参考

根据 W3C CSS 2.1 规范中的描述 'white-space:nowrap' 设置的含义为：该值像 'normal' 那样合并空白，但是阻止文本内的分行。

详细说明请参考：16.6 White space: the 'white-space' property

替换元素是用来表示超出 CSS 格式化模型表示范围的元素，他们的共同特点是没有设置宽高的情况下拥有默认宽高。常见的有：IMG INPUT TEXTAREA IFRAME 等。

详细说明请参考：replaced-element

问题描述

对容器设置了 'white-space:nowrap' 特性值后，期望抑制内容换行。但是，在容器内没有文本内容仅存在行内替换元素和行内块元素时，IE6 IE7 IE8(Q) Opera 浏览器认为这些元素不是文字内容，因而抑制内容换行规则不生效。在容器布局宽度不够的情况下，行内替换元素和行内块元素将不受父容器 'white-space:nowrap' 特性值约束，产生换行。

造成的影响

原本不希望换行的部分产生换行，导致各浏览器中小范围布局差异产生。

受影响的浏览器

问题分析

根据 CSS 2.1 规范描述， 'white-space:nowrap' 值设置会阻止文本内的分行。

原文： nowrap
    This value collapses white space as for 'normal', but suppresses line breaks within text.

在说明中， text 单词存在二义性问题，他可以表示正文也可以表示为通常意义的文字内容。

在实际情况中，元素内不仅只含有文本内容，还可能存在其他行内元素，如行内替换元素以及行内块元素，他们在父元素内组成了正文内容。如果规范所描述的
text 为正文含义，那么 'white-space:nowrap' 特性值设置将抑制这些元素之间产生换行。相反，'TEXT' 含义为普通文字，那么抑制换行策略将不会对这些元素生效。

我们来分析以下代码：

<style>
  body { font:20px/1.2 'simsun'; }
  div { width:60px; background:wheat; margin:10px 0; }
</style>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><img src="google.png" /></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><input /></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><input type="button" /></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><input type="submit" /></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><input type="file" /></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><input type="checkbox" /></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><input type="radio" /></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><textarea></textarea></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><select></select></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><iframe></iframe></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><button></button></span>
</div>
<div>
  <span style="white-space:nowrap;">中国字</span><span style="white-space:nowrap;"><span style="display:inline-block">汉字</span></span>
</div>

上例中，容器 DIV 元素的宽度为 60px，'white-space' 特性值是默认的 'normal' ，容器内标记紧密排列 ，没有因换行和空格产生匿名行内元素。这样容器的 'white-space:normal' 设置不会对容器内容是否换行产生影响。

容器内首个 SPAN 元素内有三个中文，每个中文的字号设置为 20px，整体宽度恰好是容器宽度 60px。这个 SPAN 元素内又设置 'white-space:nowrap' 特性值，说明其内三个文字会抑制换行产生。

第二个 SPAN 元素设置 'white-space:nowrap' 特性值，其内子元素没有产生文本内容，分别是常用行内替换元素以及行内块元素。

实际运行结果如下：

【注】：IE6 IE7 IE8(Q) 不支持严格意义上 CSS 2.1 规范内说明的 'display:inline-block' 特性值，但是设置 ‘inline-block’ 后会触发 IE 特有的 hasLayout 特性，使行内元素具有布局块特征，这与规范描述所要达到的效果一致。关于 hasLayout 特性的详细描述请参考 MSDN ：
"HasLayout" Overview 。

从表中可以看出：

• IE6 IE7 IE8(Q) Opera 认为行内替换元素以及行内块元素不是规范内说明的文本内容，他们在父容器布局宽度不足时不受 ‘white-space:nowrap’ 特性值制约，会产生换行；
• IE8(S) Firefox Chrome Safari 认为行内替换元素以及行内块元素均属于容器内正文，即使容器布局宽度不足，依然会抑制换行产生。

解决方案

如果需要使用 'white-space:nowrap' 特性值抑制内容换行，最好避免在容器内加入替换元素以及行内块元素，避免各浏览器出现对规范理解差异。