CSS white-space 语法
在 CSS 中，white-space 属性用于定义如何处理元素内的空白符（比如空格、换行符、制表符等）。
语法：
white-space: 关键字;说明：
white-space 的取值是一个关键字，所有取值如下表所示。
| 取值 | 说明 |
|---|---|
| normal（默认值） | 合并空格 |
| nowrap | 合并空格，并强制在同一行显示所有文本 |
| pre | 保留空白符和换行符，不自动换行。 |
| pre-wrap | 保留空白符和换行符，且自动换行。 |
| pre-line | 合并空白符，保留换行符，且自动换行。 |
| break-spaces | 与 pre-wrap 类似 |
上面提到的 “合并空格”，指的是将连续的多个空格合并成一个空格。对于 white-space 属性的各种取值，小伙伴们对比下表就非常清楚了。
| 取值 | 空格处理 | 换行符处理 | 自动换行 |
|---|---|---|---|
| normal（默认值） | 合并 | 忽略（当空格处理） | 是 |
| nowrap | 合并 | 忽略（当空格处理） | 否 |
| pre | 保留 | 保留 | 否 |
| pre-wrap | 保留 | 保留 | 是 |
| pre-line | 合并 | 保留 | 是 |
提示:
- 对于 white-space 属性来说，大多数情况下我们只会用到 normal 和 nowrap 这 2 种取值。
- white-space: nowrap; 最常见的应用场景，就是配合overflow: hidden; 和 text-overflow: ellipsis; 来实现单行文本溢出的省略号（...）。
CSS white-space 摘要
| 属于 | CSS 字体属性 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 是 |
| 默认值 | normal |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS white-space 示例
接下来，我们通过一个简单的例子来讲解一下 CSS white-space 属性是如何使用的。
示例：white-space 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
width: 300px;
height: 200px;
border: 1px solid silver;
white-space: normal;
}
</style>
</head>
<body>
<p>Today, Python is one of the most popular programming languages. Although it is a general-purpose language, it is used in various areas of applications such as Machine Learning, Artificial Intelligence, web development, IoT, and more.</p>
</body>
</html>页面效果如下图所示。
分析：
如果改为 white-space: nowrap;，页面效果如下图所示。
