请解释 CSS 中的 white-space 属性的作用，并说明如何使用它控制空白符的处理方式。-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

white-space 属性对于控制文本的排版和布局非常重要。不同的值会产生不同的渲染效果，理解这些差异有助于我们更精确地控制页面元素的显示。

white-space: normal (默认值):
- 这是最常见的行为。浏览器会将连续的空格、制表符等空白字符压缩成一个空格。
- 换行符被忽略，文本将根据容器的宽度自动换行。
- 适用于大多数文本内容，无需特殊处理。
```
.example {
    white-space: normal;
}
```
```
<div class="example">
  这是一段   包含多个    空格和换行符的文本。
  浏览器会自动处理空白符并换行。
</div>
```
white-space: nowrap:
- 与 normal 类似，多个连续空白符合并为一个空格。
- **关键区别是：文本不换行。**即使容器宽度不足以容纳文本，也不会自动换行，而是会溢出容器或导致滚动条。
- 适用于单行文本，例如导航栏菜单、按钮标题等。
```
.example {
    white-space: nowrap;
}
```
```
<div class="example">
这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文本，它不会换行，而是会溢出容器。
</div>
```
white-space: pre:
- 保留所有空白符，包括空格、制表符和换行符。
- 文本不换行，除非遇到 <br> 标签。
- 类似于 HTML 的 <pre> 标签的默认行为，适用于显示代码或需要精确控制空白符的场景。
```
.example {
    white-space: pre;
}
```

// www.javascriptcn.com code example
 <div class="example">
   这是      一段      包含     多个空格      和换行符的文本。
   
   它会保留所有的空白符并不会自动换行。
 </div>
 ```

4.  **`white-space: pre-wrap`:**

 *   保留所有空白符。
 *   **关键区别是：文本会自动换行，** 类似于 `<pre>` 标签，但允许换行。
 *   适用于需要保留空白符，但又希望文本能够在必要时自动换行的场景。

 ```css
 .example {
   white-space: pre-wrap;
 }
 ```

 ```html
 <div class="example">
 这是      一段      包含     多个空格      和换行符的文本。

 它会保留所有的空白符并且在必要时自动换行。
 </div>
 ```
5. **`white-space: pre-line`:**

* 合并多个连续空白符为一个空格。
*  保留换行符，并且在必要时自动换行。
*  适用于需要保留换行符，合并多余空格，并且希望文本能够在必要时自动换行的场景。

```css
 .example {
   white-space: pre-line;
 }
 ```
```html
 <div class="example">
     这是     一段     包含  多个空格     和
     换行符的文本。
     它会合并多余空格，保留换行符，并且在必要时自动换行。
 </div>
 ```

请解释 CSS 中的 white-space 属性的作用，并说明如何使用它控制空白符的处理方式。

推荐答案

本题详细解读