在IE6 下span标签换行问题解决--》 'white-space:nowrap' 仅作用在纯文本内容上
2012-08-15 09:40
507 查看
标准参考
根据 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' 特性值约束,产生换行。造成的影响
原本不希望换行的部分产生换行,导致各浏览器中小范围布局差异产生。受影响的浏览器
IE6 IE7 IE8(Q) Opera |
---|
问题分析
根据 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) Opera | IE8(S) Firefox Chrome Safari | |
---|---|---|
常见行内替换元素 | 产生换行 | 不产生换行 |
行内块元素1 | 产生换行 | 不产生换行 |
"HasLayout" Overview 。
从表中可以看出:
IE6 IE7 IE8(Q) Opera 认为行内替换元素以及行内块元素不是规范内说明的文本内容,他们在父容器布局宽度不足时不受 ‘white-space:nowrap’ 特性值制约,会产生换行;
IE8(S) Firefox Chrome Safari 认为行内替换元素以及行内块元素均属于容器内正文,即使容器布局宽度不足,依然会抑制换行产生。
解决方案
如果需要使用 'white-space:nowrap' 特性值抑制内容换行,最好避免在容器内加入替换元素以及行内块元素,避免各浏览器出现对规范理解差异。相关文章推荐
- 转 用white-space:nowrap;解决中文标签标签换行问题
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
- <span>标签元素内容换行问题
- 文本不换行white-space: nowrap;
- white-space: nowrap 导致有宽度也不换行的问题
- CSS强制不换行(white-space:nowrap)IE使用问题
- ueditor文本超过编辑器宽度不换行问题(使pre标签内容自动换行)
- white-space: nowrap;强制标签不换行
- ie下li标签中span加float:right不换行问题解决方案
- white-space: nowrap;强制标签不换行
- CSS样式中P标签的内容换行属性white-space
- 解决<span>标签内容改变,不能触发方法的问题
- white-space: nowrap 与字符串(文本)换行
- 关于ul下<li></li>内插入<span>内容</span>标签自动换行不在同一行问题
- IE6下a标签#号问题解决方法
- 解决ie6下li左浮动文字换行的问题
- 解决ie6下li左浮动文字换行的问题
- textarea内容有换行时存入数据库丢失问题的解决 (转载)
- 解决bootstrap row span设置border换行的问题