在HTML和CSS开发中，常常会遇到对元素中的空格和换行进行控制的需求。如果没有经验，可能会很难处理这些问题，导致生成的页面看上去不美观或无法达到想要的效果。今天我们要分享的是如何使用CSS中的white-space属性来处理HTML中的空格和换行。

1. 理解white-space属性

white-space属性是CSS提供的控制空格和换行的属性。它可以设定如何处理元素内部的空格、换行符、制表符等空白字符。语法如下：

```

white-space: normal|nowrap|pre|pre-wrap|pre-line|initial|inherit;

```

其中：

- normal：默认值。文本中的空白字符会被合并，换行符会被转换为一个空格。

- nowrap：文本不换行。

- pre：文本中的空白字符和换行符都会保留，在文本中换行时也会保留。

- pre-wrap：文本中的空白字符和换行符都会保留，在必要时会换行。

- pre-line：合并连续的空白字符，除了换行符保留之外，文本不换行。

- initial：将属性设为默认值。

- inherit：继承父元素的属性值。

2. 使用normal

normal是white-space属性的默认值。当不设置white-space属性时，元素内部的空格和换行符会被合并成一个空格，而且文本会自动换行。我们举个例子来说明。

HTML代码：

```HTML

这是一段文本，内部有多个空格和 换行

```

CSS代码：

```CSS

p {

width: 200px;

```

效果：

![normal]()

可以看到，多个空格和换行符在页面上只显示成了一个空格，并且文本会自动换行。这是因为white-space属性的默认值是normal，它会将连续的空格字符转换成一个空格，换行符转换成一个空格，并且在遇到容器边缘时自动换行。

3. 使用nowrap

如果不想让文本在容器边缘自动换行，可以使用nowrap。在nowrap模式下，文本会在线盒子中一直向右延伸，直到遇到强制换行符为止。

HTML代码：

```HTML

这是一段文本，内部有多个空格和 换行

```

CSS代码：

```CSS

p {

width: 200px;

white-space: nowrap;

```

效果：

![nowrap]()

可以看到文本没有换行，而是一直向右延伸到容器边缘。需要注意的是，如果文本中包含英文字母等可以作为换行点的字符，则若该字符可以放到下一行中时，文本也会在该字符处换行。

4. 使用pre

使用pre可以完全保留文本中的空格和换行。在pre模式下，文本会按照输入时的格式原样展示，即使其中包含多余的空格和换行。

HTML代码：

```HTML

    这是一段      文本，
    内部有多个          空格和    换行

```

CSS代码：

```CSS

pre {

background-color: #EEE;

padding: 10px;

border: 1px solid #999;

white-space: pre;

```

效果：

![pre]()

可以看到空格和换行都得到了保留。需要注意的是，pre模式下文本不会自动换行，因此如果容器的宽度不够，文本会溢出。

5. 使用pre-wrap

使用pre-wrap可以保留文本中的空格和换行，但是在必要时会自动换行。在pre-wrap模式下，文本会按照输入时的格式原样展示，即使其中包含多余的空格和换行。

HTML代码：

```HTML

    这是一段      文本，
    内部有多个          空格和    换行

```

CSS代码：

```CSS

pre {

background-color: #EEE;

padding: 10px;

border: 1px solid #999;

white-space: pre-wrap;

width: 200px;

```

效果：

![pre-wrap]()

可以看到，空格和换行都得到了保留，并且当文本超出容器宽度时自动换行。需要注意的是，因为文本换行的行高是由容器的宽度决定的，因此文本中的行高可能不一致，影响美观性。

6. 使用pre-line

使用pre-line可以将多个空格字符合并成一个空格，并且除了换行符保留之外，文本不换行。在pre-line模式下，如果有连续的空格，则只保留一个，如果没有空格，则按照普通文本格式显示。

HTML代码：

```HTML

    这是一段      文本，
    内部有多个          空格和    换行

```

CSS代码：

```CSS

pre {

background-color: #EEE;

padding: 10px;

border: 1px solid #999;

white-space: pre-line;

width: 200px;

```

效果：

![pre-line]()

可以看到，空格被合并成了一个，并且文本没有自动换行，除了换行符保留之外。需要注意的是，如果文本中没有连续的空格，它们将被忽略，因此文本可能显示不同于输入时的格式。

7. 总结

white-space属性是CSS控制HTML中空格和换行的重要属性，可以使用它来控制文本的显示格式，使文本更美观和易于阅读。我们通过以上的例子演示了white-space属性的常见取值，希望能帮助读者更好地理解和运用它。