在IE6,IE7下变通实现pre-wrap

2016-02-20 00:23 6 1 收藏

下面是个超简单的在IE6,IE7下变通实现pre-wrap教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

HTML 的空白符处理规则

HTML 中的空白符包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。

我们知道,在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被视为一个,或者说,连续的多个空白符会被合并。

然而在有些时候,我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现,或者需要源码中的换行符能起到真正的换行作用。于是,我们发现了 pre 标签,它可以真实还原它内部文本的空白符的真实情况。

于是我们经常会把一段表示计算机代码的文本放进 pre 标签中,它们在浏览器中会表现出自身的空格缩进和换行效果,而不需要我们增加额外的样式和标签来控制它的缩进和换行。

随着对 CSS 的了解不断深入,我们发现,原来这一切都是 white-space 属性在安排。pre 元素之所以如此神奇,是因为它自身具有 {white-space: pre;} 这一默认样式。

white-space 属性

CSS 中的 white-space 属性用于设置文本空白符的处理规则,这其中包括:是否合并空白符、是否保留换行符、是否允许自动换行。各属性值的不同行为如下表所示:

white-space 属性值一览表 

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

属性值空白符换行符自动换行最早出现于

:在 CSS1/2 下,white-space 属性只可应用于块级元素;在 CSS 2.1 下,可应用于所有元素。)

如果我们需要某个容器元素具有类似 pre 元素的空白符处理行为,则为它设置 {white-space: pre;} 样式即可。

对 pre-wrap 的需求

我们先解释一下上述表格中的自动换行行为,它是指某元素内部的文本流按照文本方向排版,当文本流遇到限制其继续延伸的边界时,是否换行。不允许自动换行则意味着文本流会溢出该元素。

因此,{white-space: pre;} 样式有时候并不能满足我们的期望。比如,在某些不需要特别严谨的场合,或者排版某些对换行不敏感的代码片断(比如 HTML 或 CSS)的时候,我们不希望代码片段中的一行长代码令它的容器元素产生水平滚动条,因为那样不便阅读。我们希望在这种情况下,长代码自动换行就好。

这时,对照一下上表中各属性值的不同行为特征,我们会发现 pre-wrap 这个属性值脱颖而出它正是我们所需要的。

来源:https://www.tulaoshi.com/n/20160220/1631756.html

延伸阅读
标签: Web开发
简单试用了一下IE8后,今天相对有时间点,对IE8、IE7、IE6、Firefox2.0.0.12做了简单的一些CSS HACK测试。 样式代码: p {color:#f00;} xhtml代码: p文字/p 主要是测试文字这个颜色在不同浏览器下使用hack的一些结果报告。 早上测试的东西少了几个,这里补上,还有更多的东西等怿飞的测试报告。下午有时间再看看...
标签: Web开发
基本HTML代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml" headtitleDiv Float Sample/titlestyle type="text/css"div { margin:3px; }.d1 { width:250px; min-height:...
标签: Web开发
很早就在这里看到过解决方案,与嗷嗷讨论后发现这个方案还是很可靠的。当然,唯一的缺点就是每一个属性都要去Hack,但我在很多实践中,只用‘修正’1-2个属性就可以了。 具体写法很容易: #someNode {     position: fixed;    #position: fixed;    _position: fixed; } 第一排给Firefox以及其他浏览器...
标签: Web开发
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] js判断IE6/IE7/FF 代码如下: if (window.XMLHttpRequest) { //Mozilla, Safari,IE7 alert('Mozilla, Safari,IE7 '); if(!window.ActiveXObject){ // Mozilla, Safari, alert('Mozilla, Safari'); } else { alert('IE7'); } } else { alert('IE6'); } 更详细的代码可以参考 ...
标签: Web开发
关于CSS HACK的文章在webjx.com中提及的也很多。 CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。 FF浏览器 .test{     height:20px;     background-color:orange; } IE7浏览器 *+html .test{/*IE7*/     height:20px;     background-color:blue; ...

经验教程

257

收藏

42
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部