网页中换行符的处理.docxVIP

网页中换行符的处理Liu_Rong_H是HTML标签，表示“换行”的意思。在文本中插入该标签后，网页上表现为文本换行。也是HTML标签，表示“段落”的意思。是段落标记符，在网页表现为一个段落。是HTML标签，但即将被取消。问题的提出：1、简单文本的问题：我们采用表单项（多行文本框）收集用户提交的留言信息，因此，该信息中可能包含换行符、制表符以及空格，有时可能会出现连续多个换行符或者空格，如何处理这些字符？有时我们将换行符用标签替换。但是按照用户的意思，输入回车的意思是“换行”还是“另起一段”呢？我们认为即是换行又是另起一段。因此，应该用标签对进行转换。2、WORD文档的问题：在发布信息时，经常把WORD文档内容复制到在线编辑器中，然后发布到网页上。WORD文档中有时会带有“硬回车”或者“软回车”符。在WORD中，“软回车”叫做“手动换行符”，按Shift+Enter插入；“硬回车”叫做“段落标记”，按Enter键插入。将WORD文档另存为HTML网页时，硬回车将转换成段落标记对以及换行编码0x0D 0x0A，软回车将转换成文本换行符以及换行编码0x0D 0x0A。一般来说，在线编辑器会正确处理WORD的格式信息。即把硬回车转换为段落，将软回车转换为换行。问题是：如果网页中不使用标签，又想保留排版格式，怎么办？HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。在默认情况下，HTML 源码中的空白符均被显示为空格（包括换行符），并且连续的多个空白符会被视为一个，连续的多个空白符会被合并。在同一个段落中，如果文本长度超过了容器的宽度，那么就会产生“自动换行”的现象，多出来的内容在下一行里继续排列。网页中的“自动换行”是什么意思呢？它是指某元素内部的文本流按照文本方向排版，当文本流遇到限制其继续延伸的边界时，是否换行。“不允许自动换行”则意味着文本流会溢出该元素。有些时候，我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现，或者需要源码中的换行符能起到真正的换行作用。于是，我们使用 标签，它可以真实还原它内部文本的空白符的真实情况。在浏览器里， 标签中的文本会表现出自身的空格缩进和换行效果，而不需要我们增加额外的样式和标签来控制缩进和换行。换言之，标签不允许“自动换行”。因为不允许自动换行，所以样式并不总能满足我们的期望。比如，在某些不需要特别严谨的场合，或者排版某些对换行不敏感的代码片断（比如 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 属性应用于所有元素。如果我们需要某个容器元素具有类似 元素的空白符处理行为，则为它设置 white-space: pre; 式样即可。对照上表，pre-wrap 这个属性值正是我们所需要的：保留空白符，保留换行符，允许自动换行。对于多行文本框提交的数据，直接为文本的容器元素设置 white-space: pre-wrap; 式样，就可以还原多行文本的真实状态。再来看一下上面的表格，我们发现 pre-wrap 是从 CSS 2.1 引入的属性值。然而，目前网民使用最为广泛的 IE 6/7 浏览器是基于 CSS 1 和一部分 CSS 2 的，它们完全不能识别 pre-wrap，当然也无法实现 pre-wrap 的空白符处理行为。如何在 IE 6、IE 7 下实现 pre-wrap 的效果？这是一段多行文本数据，其中某些文本行会非常长，从而溢出容器，比如你现在看到的这行，行与行之间有换行符，但没有使用 HTML 换行标签我们需要将 .content 元素设置为 pre-wrap 式样，理想情况下只需要编写如下 CSS 代码以了。.contentwhite-space: pre-wrap;但为了应付 IE 6/7，我们需要将 CSS 代码修改如下：.content white-space: pre-wrap;*white-space: pre;*word-wrap: break-word;这样就可以了，我们在各浏览器中实测一下，以发现我们需要的效果完美实现。当然，你可能注意到了，我们使用了一点儿 CSS hack。别担心，它们条理清晰并且容易维护。在面对低能浏览器的时候，我们只能给予它们一些额外关照。在上面的 CSS 代码中，很显然对于标准浏览器，我们是用正常的 white-space: pre-wrap; 来实现所需效果的。而对于 IE 6/7，我们使用了 CSS hack，让它接受额外的式样声明，使用其它方法来实现类似 pre-wrap 的效果。首先，在 IE 6/7 下，white-space: pre-wrap; 这条式样声明由于不能识别而被丢弃，我们为 .content 另外设置了 white-space: pre; 的式样。我们已经很熟悉 pre 了，它的特性与我们想要的 pre-wrap 效果只有一点区别，即 pre 不允许自动换行，也说，较长的文本行能会溢出其容器元素。因此，接下来，为了让这些较长的文本行自动换行，我们为 .content 元素设置 word-wrap: break-word; 式样，谨慎起见，我们用 CSS hack 将这条声明隔离给 IE6/7；不过即使将它暴露给所有浏览器，它也是无害的。这条声明负责对 .content 元素内的文本行进行约束，并强制其换行。也说，white-space: pre; 完成了识别文本换行符的任务，剩下的自动换行的任务交由 word-wrap: break-word; 来完成。CSS 发展至今经历了多个版本，但它对文本排版的控制仍然不够精确灵活。微软的 IE 浏览器开发了一些私有属性，扩展了 CSS 的文本排版功能，尤其可贵的是，这些扩展属性大多考虑到了非拉丁语系语言的排版规则。由于这些私有扩展属性确实很有价值，它们被整理并收录到了 CSS3 草案中。word-wrap 属性其中很有代表性的例子。它决定了文本行超过容器的边界时是否断开转行。目前这一属性已经得到了绝大多数主流浏览器的支持。回到前面的原理分析，其实我们会发现一个矛盾，white-space: pre; 很倔犟地不愿换行，而 word-wrap: break-word; 则要求内部文本自动换行。面对这样的冲突，浏览器如何决断？在 CSS 中，控制文本换行方式的属性有很多，当发生冲突的时候，某些属性在文本排版中的优先级更高，因而会在冲突中胜出，决定最终的文本式样。很显然，在上面的这起冲突中，word-wrap: break-word; 更加