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

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

空白处理

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

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

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

  • pre-warp: 和 pre 基本一致,但是如果元素宽度不够,它会自动进行换行。换言之,就是所有空白会被保留,所有需要换行的地方都会换行。
  • pre-line: 和 pre-warp 基本一致,但连续空白会被合并。换言之,连续的空格只会显示成一个,但是所有需要换行的地方都会进行换行。

长单词

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

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

它的取值就是两种情况:

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

单词判定

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

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

word-break 说的是如何算作一个单词(word)。

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

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

  • 我需不需要它自动进行换行?
  • 如果单词过长,我该怎么办?
  • 怎样才会算作一个单词?

【本章助记卡片:卡片 for 第四十章