CSS 实现自动换行、强制换行、强制不换行的属性

封面图 • 2025-10-16 • Html/Css

在 CSS 中，控制文本换行的行为主要通过以下属性来实现：

---

## 一、自动换行（默认行为）

### 属性：`word-wrap` 或 `overflow-wrap`

- **`word-wrap: normal;`**（默认）  
  默认行为，只有在单词中间可以断开时才会换行。

- **`word-wrap: break-word;`**  
  允许在单词内部进行换行（适用于长单词或 URL 等），防止内容溢出。

```css
.text {
  word-wrap: break-word;
}
```

---

## 二、强制换行

### 属性：`white-space`

- **`white-space: pre-wrap;`**  
  保留空白符（空格、换行等），并且允许内容在需要时自动换行。

- **`white-space: pre-line;`**  
  保留空白符，但合并多个空格为一个，并在必要时换行。

- **`white-space: break-spaces;`**（较新浏览器支持）  
  保留所有空白符，并在需要时换行。

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

---

## 三、强制不换行

### 属性：`white-space`

- **`white-space: nowrap;`**  
  防止文本换行，所有内容在同一行显示，即使超出容器宽度。

```css
.text {
  white-space: nowrap;
}
```

---

## 四、其他相关属性

| 属性 | 说明 |
|------|------|
| `overflow-wrap` / `word-wrap` | 控制是否在单词内换行 |
| `white-space` | 控制空白符和换行行为 |
| `text-overflow` | 控制文本溢出时的显示方式（如 `...`） |
| `hyphens` | 控制自动断词（如英文中的连字符） |

---

## 五、示例总结

```css
/* 自动换行（允许在单词中换行） */
.auto-wrap {
  word-wrap: break-word;
}

/* 强制换行（保留空格并允许换行） */
.force-wrap {
  white-space: pre-wrap;
}

/* 强制不换行 */
.no-wrap {
  white-space: nowrap;
}
```

---

如果你有具体的使用场景（比如在 `<div>`、`<p>` 或表格中），我可以给出更详细的建议。