网页中换行符处理.docxVIP

网页中换行符的处理Liu_Rong_Hai@br是HTML标签，表示“换行”的意思。在文本中插入该标签后，网页上表现为文本换行。p也是HTML标签，表示“段落”的意思。是段落标记符，在网页表现为一个段落。br是HTML标签，但即将被取消。问题的提出：1、简单文本的问题：我们采用testarea表单项（多行文本框）收集用户提交的留言信息，因此，该信息中可能包含换行符、制表符以及空格，有时可能会出现连续多个换行符或者空格，如何处理这些字符？有时我们将换行符用br标签替换。但是按照用户的意思，输入回车的意思是“换行”还是“另起一段”呢？我们认为即是换行又是另起一段。因此，应该用p/p标签对进行转换。2、WORD文档的问题：在发布信息时，经常把WORD文档内容复制到在线编辑器中，然后发布到网页上。WORD文档中有时会带有“硬回车”或者“软回车”符。在WORD中，“软回车”叫做“手动换行符”，按Shift+Enter插入；“硬回车”叫做“段落标记”，按Enter键插入。将WORD文档另存为HTML网页时，硬回车将转换成段落标记对p/p以及换行编码0x0D 0x0A，软回车将转换成文本换行符br以及换行编码0x0D 0x0A。一般来说，在线编辑器会正确处理WORD的格式信息。即把硬回车转换为段落p/p，将软回车转换为换行br。问题是：如果网页中不使用br标签，又想保留排版格式，怎么办？HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。在默认情况下，HTML 源码中的空白符均被显示为空格（包括换行符），并且连续的多个空白符会被视为一个，连续的多个空白符会被合并。在同一个段落中，如果文本长度超过了容器的宽度，那么就会产生“自动换行”的现象，多出来的内容在下一行里继续排列。网页中的“自动换行”是什么意思呢？它是指某元素内部的文本流按照文本方向排版，当文本流遇到限制其继续延伸的边界时，是否换行。“不允许自动换行”则意味着文本流会溢出该元素。有些时候，我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现，或者需要源码中的换行符能起到真正的换行作用。于是，我们使用 pre 标签，它可以真实还原它内部文本的空白符的真实情况。在浏览器里，pre 标签中的文本会表现出自身的空格缩进和换行效果，而不需要我们增加额外的样式和标签来控制缩进和换行。换言之，pre标签不允许“自动换行”。因为不允许自动换行，所以pre样式并不总能满足我们的期望。比如，在某些不需要特别严谨的场合，或者排版某些对换行不敏感的代码片断（比如 HTML 或 CSS）的时候，我们不希望代码片段中的一行长代码令它的容器元素产生水平滚动条，因为那样不便阅读。我们希望在这种情况下，长代码自动换行就好。一切的一切，其实都是需要 white-space 属性。解决方案CSS 中的 white-space 属性用于设置文本空白符的处理规则，这其中包括：是否合并空白符、是否保留换行符、是否允许自动换行。各属性值的不同行为如下表所示：white-space 属性值一览表属性值空白符换行符自动换行最早出现于nowrap合并忽略不允许CSS 1pre保留保留不允许CSS 1pre-wrap保留保留允许CSS 2.1pre-line合并保留允许CSS 2.1在 CSS1/2 下，white-space 属性只应用于块级元素；在 CSS 2.1 下，white-space 属性应用于所有元素。如果我们需要某个容器元素具有类似 pre 元素的空白符处理行为，则为它设置 {white-space: pre;} 式样即可。对照上表，pre-wrap 这个属性值正是我们所需要的：保留空白符，保留换行符，允许自动换行。对于多行文本框提交的数据，直接为文本的容器元素设置 {white-space: pre-wrap;} 式样，就可以还原多行文本的真实状态。再来看一下上面的表格，我们发现 pre-wrap 是从 CSS 2.1 引入的属性值。然而，目前网民使用最为广泛的 IE6/7 浏览器是基于 CSS1 和一部分 CSS2 的，它们完全不能识别 pre-wrap，当然也无法实现 pre-wrap 的空白符处理行为。如何在 IE6、IE 7 下实现 pre-wrap 的效果？div class=content这是一段多行文本数据，其中某些文本行会非常长，从而溢出容器，比如你现在看到的这行，行与行之间有换行符，但没有使用 HTML 换行标签/div我们需要将.content 元素设置为 pre-wrap 式样，理想情况下只需要编写如下 CSS 代码以了。.content{white-space: pre-wrap;}但为了应付 IE6/7，我们需要将 CSS 代码修