第四十章关于换行-易看设计

在我们写作文的时候，这一行写到头，怎么办呢？当然是折回来，从下一行开始了。这个问题在汉字中比较简单（除非遇到标点）。但是到了英文里，因为单词长短不一，换行这个问题就稍微显得复杂一点。这一章我们要讲三个属性，并且解释一些前面所遗留下来的疑惑。

在说代码中的空白，对于代码的影响的时候，我并没有给出一个肯定的答案。让大家自己动手做了个测试，也许你心中有一个自己所归纳的结果。那么现在让我们开始知其然也知其所以然。

white-space 这两个单词大家应该都认识，那么就当做空白去理解就好（多么的简单粗暴啊）。它是说如何去处理内容中的空白。那么怎么才算空白？空格，Tab，换行……这些都算。那么我们来看一下它的属性值，或者说那些处理的方法：

normal：这是默认值，他会把连续的空白合并，所以你无论连续输入多少个空格，最后显示出来都是一个。在代码中的换行，也会被当做一个空格来处理。但是当元素中空间不够的时候，它会自觉的在合适的位置进行换行。
nowrap：和上面差不多，只是打死也不换行，装不下也不换行……
pre：基本上你在代码里写的是什么样子，这里就是什么样子。它不会合并空白，代码中的换行也被显示为换行，当然你用 <br> 也可以进行换行，但是不会因为元素宽度不够而自动换行。

一般掌握上面三个属性值就已经足够用了，如果确实情况有些特殊，还可以看看下面两个：

上面就解决了我们是不是要在元素宽度不够的时候进行换行的问题。但如果需要换行，在什么地方合适呢？如果是英文，就涉及到一个能不能将单词打断的问题：

overflow-wrap 用来描述当一个单词处于行尾的时候应该如何处理。这个属性以前叫做 word-wrap，目前你用这两种叫法都可以，不过第一个是最新的标准，而后面一个被当作别名。

它的取值就是两种情况：

normal：每一行，写下它所能够容纳的最多的单词，容纳不下，就转到下一行去，这很像我们日常英文的写法。但如果一个单词长到这一行都容纳不下他它，那就让它超出元素本身的宽度，一直往后写。
break-word：强迫症会觉得超出元素宽度是无法忍受，所以使用这个属性值，可以让一行都容纳不下的单词，在超出元素宽度之前进行强制换行（打断）。

其实上面已经很好了，我们即解决了是不是要换行，又解决了应该在哪里换行。

但是如果再考虑上中文呢？确切的说是所有的方块字，就是中日韩三国文字，缩写为：CJK。

word-break 说的是如何算作一个单词（word）。

normal：使用默认规则，你可以理解为英文遇到空白或者标点就算一个单词的结束，然后每一个汉字都被当做一个单词去看待。
break-all：一个字符被当作一个单词看待，那么在需要换行的时候，只要有必要，可以在任意位置换行，而且在换行前每一行都会被填满。你可以理解为把一切都当做中文去处理了。
keep-all：与上面相反，这是把所有的文字都当做英文去处理了，没有遇到空白或者标点符号，那这就是一个单词，就要按照单词处理。

那么最后，换行的效果如何，取决于这三个属性的相互作用。很多新人遇到这个问题都会觉得很复杂，但其实你按着本文的顺序，挨个问题进行考虑，也是非常简单的。