有两个CSS属性我一直在混淆着其意义，今天一并整理掉。
white-space和word-wrap通常用来解决如下问题：
- 字符串太长，但又不想让其换行，强制其在一行中（如显示代码），如何实现?
- 单词太长，但如果不折行的话会溢出，我希望它能多行显示。
- 为什么我明明打了10个空格，可显示出来的只有一个?
- 为什么我明明敲了10个回车，浏览器却完全不显示?
white-space
white-space可以取如下的值：
normal | nowrap | pre | pre-wrap | pre-line
关于解释，看图比较直接。
以下截图均由如下代码模板得到：
<body>
<div style="white-space: {{value}};">hello world
my name
is ssnau, i am living in the beauuuuuutiful hangzhou city
</div>
</body>
注：segmentfault会在正文压缩图片，点击图片可看原图)
word-wrap
word-wrap能取如下值：
normal | break-word
以下两个示例抄自MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap）
normal: 单词超长也不可折行，产生溢出:
p { width: 13em; background: gold; }
效果：
break-word: 单词超长会折行:
p { width: 13em; background: gold; word-wrap: break-word; }
效果：
总结
white-space是作用于空格和回车上的，用于控制：
- 空格是否合并
- 回车是否解释成折行
- 句子太长是否在有空格处折行
而word-wrap是作用在单词上，用于控制超长单词是否折行。
注意white-space有一堆pre开头的值，pre到底是什么意思呢？
通常嘛pre是prefix的缩写，不过这可解释不通啊。在html里也有一个<pre>的标签，它们之间有什么联系呢?
其实它们都是preserve（保留）的缩写啦。于是我们可以这么理解：
-
pre: 保留(preserve)所有的空格和回车，且不允许折行。（把折行也看成是一种非preserve） -
pre-wrap: 保留(preserve)所有的空格和回车，但是允许折行(wrap)。 -
pre-line: 仅仅保留(preserve)回车(line)，会合并空格，且允许折行
而<pre>正是默认有如下CSS的元素：
pre {
display: block;
white-space: pre;
}
篇首的几个问题，就当是习题好了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。