CSS3 文本样式 - white-space 属性

核心知识点

white-space 属性的概念

white-space 属性用于控制元素内空白字符（空格、制表符、换行符等）的处理方式，以及文本是否在容器边界处自动换行。

white-space 属性的值

学习目标

1. 理解 white-space 属性的作用和不同值的效果
2. 掌握如何使用 white-space 属性控制文本的空白处理和换行行为
3. 能够根据不同场景选择合适的 white-space 值
4. 了解 white-space 属性与其他文本相关属性的配合使用

代码示例

基本用法示例

/* 示例 1: normal 值 */
.normal {
  white-space: normal;
  width: 200px;
  border: 1px solid #ccc;
}

/* 示例 2: nowrap 值 */
.nowrap {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 示例 3: pre 值 */
.pre {
  white-space: pre;
  width: 200px;
  border: 1px solid #ccc;
}

/* 示例 4: pre-wrap 值 */
.pre-wrap {
  white-space: pre-wrap;
  width: 200px;
  border: 1px solid #ccc;
}

/* 示例 5: pre-line 值 */
.pre-line {
  white-space: pre-line;
  width: 200px;
  border: 1px solid #ccc;
}

/* 示例 6: break-spaces 值 */
.break-spaces {
  white-space: break-spaces;
  width: 200px;
  border: 1px solid #ccc;
}

HTML 结构

<div class="normal">
  这是一段 包含 多个 空格 的文本，会被合并为一个空格，并且会在容器边界处自动换行。
</div>

<div class="nowrap">
  这是一段 包含 多个 空格 的文本，会被合并为一个空格，但不会在容器边界处自动换行。
</div>

<div class="pre">
  这是一段 包含 多个 空格 的文本，
  会保留所有空格和换行符，
  但不会在容器边界处自动换行。
</div>

<div class="pre-wrap">
  这是一段 包含 多个 空格 的文本，
  会保留所有空格和换行符，
  并且会在容器边界处自动换行。
</div>

<div class="pre-line">
  这是一段 包含 多个 空格 的文本，
  会合并连续的空格，但保留换行符，
  并且会在容器边界处自动换行。
</div>

<div class="break-spaces">
  这是一段 包含 多个 空格 的文本，
  会保留所有空格和换行符，
  并且会在容器边界处自动换行，
  空格也会被视为可换行点。
</div>

实用案例分析

案例 1: 单行文本溢出处理

在导航栏或标题中，经常需要处理单行文本溢出的情况：

.nav-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
}

案例 2: 代码块显示

在显示代码时，需要保留代码的格式和缩进：

.code-block {
  white-space: pre-wrap;
  font-family: 'Courier New', monospace;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}

案例 3: 地址信息显示

在显示地址信息时，需要保留换行符但合并多余的空格：

.address {
  white-space: pre-line;
  line-height: 1.5;
}

ASCII 示意图

white-space 不同值的效果对比

+-------------------+------------------------+------------------------+
| 值                | 空白字符处理           | 文本换行行为           |
+-------------------+------------------------+------------------------+
| normal            | 合并连续空白字符       | 自动换行               |
| nowrap            | 合并连续空白字符       | 不自动换行             |
| pre               | 保留空白字符           | 只在换行符处换行       |
| pre-wrap          | 保留空白字符           | 自动换行 + 换行符换行  |
| pre-line          | 合并连续空白字符       | 自动换行 + 换行符换行  |
| break-spaces      | 保留空白字符           | 自动换行 + 换行符换行  |
+-------------------+------------------------+------------------------+

实践练习

练习 1: 实现单行文本溢出显示省略号

创建一个宽度为 200px 的 div 元素，使用 white-space 属性实现单行文本溢出时显示省略号。

练习 2: 实现代码块的正确显示

创建一个代码块，使用 white-space 属性确保代码的缩进和格式得到保留，同时在容器宽度不足时能够自动换行。

练习 3: 比较不同 white-space 值的效果

创建一个测试页面，比较不同 white-space 值对相同文本的处理效果，观察空白字符和换行行为的差异。

总结

white-space 属性是 CSS3 中控制文本空白处理和换行行为的重要属性，通过设置不同的值，可以实现各种文本布局需求：

• normal: 默认值，适合大多数文本内容
• nowrap: 适合需要单行显示的场景，如导航栏
• pre: 适合需要精确保留格式的场景，如代码
• pre-wrap: 适合需要保留格式且自动换行的场景
• pre-line: 适合需要保留换行但合并空格的场景
• break-spaces: 适合需要更灵活空白处理的现代布局

合理使用 white-space 属性，可以使文本内容的显示更加符合设计意图，提升用户体验。