一、空格规则
HTML 代码的空格通常会被浏览器忽略。
<p>◡◡hello◡◡world◡◡</p>
上面是一行 HTML 代码，文字的前部、内部和后部各有两个空格。为了便于识别，这里使用半圆形符号◡表示空格。
浏览器的输出结果如下。
hello world
可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。
如果希望空格原样输出，可以使用<pre>标签。
<pre>◡◡hello◡◡world◡◡</pre>
另一种方法是，改用 HTML 实体 表示空格。
<p> hello world </p>
二、空格字符
HTML 处理空格的规则，适用于多种字符。除了普通的空格键，还包括制表符（\t）和换行符（\r和\n）。
浏览器会自动把这些符号转成普通的空格键。
<p>hello world</p>
上面代码中，文本内部包含了一个换行符，浏览器视同为空格，输出结果如下。
hello world
所以，文本内部的换行是无效的（除非文本放在<pre>标签内）。
<p>hello<br>world</p>
上面代码使用<br>标签显式表示换行。
三、CSS 的 white-space 属性
HTML 语言的空格处理，基本上就是直接过滤。这样的处理过于粗糙，完全忽视了原始文本内部的空格可能是有意义的。
CSS 提供了一个white-space属性，可以提供更精确一点的空格处理方式。该属性共有六个值，除了一个通用的inherit（继承父元素），下面依次介绍剩下的五个值。
3.1 white-space: normal
white-space属性的默认值为normal，表示浏览器以正常方式处理空格。
<p>◡◡hellohellohello◡hello world </p>
上面代码中，文本前部有两个空格，内部有一个长单词和一个换行符。
然后，容器<p>指定一个比较小的宽度。为了便于识别，背景色设为红色。
p { width: 100px; background: red; }
显示效果如下图。
可以看到，文首的空格被忽略。由于容器太窄，第一个单词溢出容器，然后在后面一个空格处换行。文本内部的换行符自动转成了空格。
3.2 white-space: nowrap
white-space属性为nowrap时，不会因为超出容器宽度而发生换行。
p { white-space: nowrap; }
显示效果如下图。
所有文本显示为一行，不会换行。
3.3 white-space: pre
white-space属性为pre时，就按照<pre>标签的方式处理。
p { white-space: pre; }
显示效果如下图。
上面结果与原始文本完全一致，所有空格和换行符都保留了。
3.4 white-space: pre-wrap
white-space属性为pre-wrap时，基本还是按照<pre>标签的方式处理，唯一区别是超出容器宽度时，会发生换行。
p { white-space: pre-wrap; }
显示效果如下图。
文首的空格、内部的空格和换行符都保留了，超出容器的地方发生了折行。
3.5 white-space: pre-line
white-space属性为pre-line时，意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。
p { white-space: pre-line; }
显示效果如下图。
除了文本内部的换行符没有转成空格，其他都与normal的处理规则一致。这对于诗歌类型的文本很有用。
四、参考链接
- When does white space matter in HTML?，by Patrick Brosset
- white-space，by Sara Cope
（完）
李奇 说：
居然是第一条留言，真的很佩服可以读英文文档获取资讯知识的人，也佩服学到了东西爱分享的人。
2018年7月30日 22:51 | # | 引用
张涛 说：
晚上微博看到了，详细阅读了一下，非常实用的小细节东西，多掌握这种小的知识点必定会节省开发时间。
2018年7月31日 14:42 | # | 引用
梁晓辉 说：
我是linux的初学者，晚上翻看了您的博客《Linux的启动过程》，感觉您是很有“功夫”的人，向您学习！
2018年7月31日 20:30 | # | 引用
kfunny 说：
一直追着看您的博客 今天第一次留言 还是觉得不太习惯 感觉disqus好用一点呢
2018年7月31日 21:08 | # | 引用
walacewang 说：
怎么都溢出了呢？要想不溢出有办法吗
2018年8月 1日 07:45 | # | 引用
fengjiahao 说：
是的，分享到一定程度，我们就可以成为一个社区了
2018年8月 1日 15:34 | # | 引用
wjy 说：
阮老师好，想问一下为啥我输入
hello
，然后在浏览器中打开之后换行生效了呢world
2018年8月 1日 17:30 | # | 引用
11 说：
这个是什么意思是哦？
Not Found
The requested URL /photo.html was not found on this server.
Apache/2.4.25 (Debian) Server at 172.19.0.3 Port 80
2018年8月 1日 17:56 | # | 引用
Krist Pan 说：
可是disqus无法正常访问啊。
2018年8月 1日 18:11 | # | 引用
[email protected] 说：
阮老师好，loadjscssfile 函数写的很好但绕过很容易，别折腾了
2018年8月 2日 11:42 | # | 引用
mcxu.org 说：
之前一直用 来处理空格，今天又学到新知识点了
2018年8月 2日 21:22 | # | 引用
木易杨 说：
上午看到这篇文章，下午就用到了，小确幸
2018年8月 3日 11:00 | # | 引用
Mars 说：
尽管是一个小小的属性也是值得每一位前端开发去思考在合适的地方用合适的属性
2018年8月 3日 11:17 | # | 引用
tiger 说：
开心，阮老师最棒
2018年8月 3日 15:04 | # | 引用
名夏 说：
很实用，之前一直没注意过，谨记，开发时能省很多事
2018年8月 6日 10:31 | # | 引用
yohao 说：
建议网站加一个 回到顶部，每次都要滚上去，^_^~~
2018年8月 6日 18:21 | # | 引用
十划吕 说：
关于文本类的空白字符处理还有 letter-spacing, 可以控制文本字符间的间隙, 配合 ::before, ::after 也有不错的效果
2018年8月 7日 11:50 | # | 引用
林海草原 说：
这篇博客对我修改博客代码起到了指导作用，谢谢阮老师！
2018年8月 7日 23:06 | # | 引用
beryl 说：
是的呢，以前一只用 来处空格，现在又学了一招
2018年8月15日 20:01 | # | 引用
烟雨蒙蒙陆振华 说：
经测试3.2节显示的效果图有误，hellohellohell前面应有两个空格，图中只有一个。
不知道这是否受使用的软件不同而有所影响。
2018年9月26日 16:14 | # | 引用
陈崇强 说：
老师问下您文中提到的这边我有些没理解：
-------------------------------------------
文本内部的换行是无效的（除非文本放在<pre>标签内）
<p>hello<br>world</p>
上面代码使用<br>标签显式表示换行。
-------------------------------------------
测试了下好像是有效的。
----------------------------------
<p>hello<br><br>world</p>
----------------------------------
2018年10月 9日 12:02 | # | 引用
1 说：
你好，pre-line上面为什么会多出一行空白，这个有办法解决吗？
2020年1月13日 11:57 | # | 引用
缪子龙 说：
可以使用 over-flow:hidden;
2020年4月 8日 17:37 | # | 引用