如何在HTML页面中保留空格和换行符

对于html内置的内联级标签以及表单元素标签，源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格。

包括ie和ff。而这个空格是会被当作一个空白节点（nodeType等于3的节点，就是文字节点）。

对于html内置的块级标签使用了display:inline则没上述问题。

对于html内置的块级标签之间的换行，ff会当作一个空白节点（用js可以获取到），ie则会忽略掉这个换行。

这个换行在ie和ff的页面上并无任何影响，不会出现空格。

可以手动添加空格或者使用CSS的white-space属性控制文本换行。

1. 手动添加空格：在HTML代码中添加 来制造换行。

2. 使用CSS的white-space属性：使用如下CSS代码控制换行：

```

element{

white-space: pre-wrap

}

```

其中，pre-wrap的意思是：文本会按照原有的换行符和空格来显示。即保留原来的换行格式。

HTML会把行内元素中的回车换行符转换为空格显示（如果是连续的多个回车换行符只会显示为一个空格），所以你会看到上面第一张图的 全国站 与后面的 [切换 之间的空隔比第二张图的要大。而估计你的city是有宽度限制的，第一张图中的文字中因为多了个空格超长了所以就换行了。

---