在
CSS 中控制文本或元素的
换行，通常用于处理长文本、避免内容溢出容器等场景。以下是几种常见的
CSS 换行方式及其使用场景和代码示例：
---
### 1. `white-space` 属性（最常用）
`white-space` 控制空白符（空格、
换行）如何处理。
#### 常用值：
- `normal`：合并空白符，自动
换行（默认行为）
- `nowrap`：不
换行，强制在同一行
- `pre`：保留空白和
换行，但不自动
换行
- `pre-wrap`：保留空白和
换行，并允许自动
换行
- `pre-line`：合并空白符，但保留
换行符并允许自动
换行
#### 示例：允许长文本自动
换行
```
css
.text-wrap {
white-space: normal; /* 默认即可 */
word-wrap: break-word; /* 允许长单词断行 */
word-break: break-all; /* 强制断行（包括中文） */
overflow-wrap: break-word; /* 推荐替代 word-wrap */
}
```
```html
<div class="text-wrap">
这是一段非常非常非常非常非常非常非常非常非常长的中文文本，需要
换行显示。
</div>
```
> ✅ **推荐组合**：
> ```
css
> .wrap-text {
> white-space: pre-wrap; /* 保留
换行符并
换行 */
> word-wrap: break-word; /* 长单词
换行 */
> overflow-wrap: break-word;
> }
> ```
---
### 2. `word-break` 属性
控制单词内部如何断行。
- `normal`：只在空格或连字符处
换行
- `break-all`：允许在任意字符间断行（适合中文）
- `keep-all`：不允许在单词内断行（适合中日韩）
```
css
.chinese-text {
word-break: break-all; /* 中文常设此值 */
}
```
---
### 3. `word-wrap` / `overflow-wrap`（同义）
用于控制是否允许长单词或 URL 溢出容器。
```
css
.long-word-wrap {
overflow-wrap: break-word; /* 或 word-wrap: break-word; */
}
```
> 💡 `word-wrap` 是旧名称，`overflow-wrap` 是标准属性名，但两者目前都可用。
---
### 4. 强制
换行（插入 `<br>` 或使用伪类）
如果想在特定位置
换行，可以用 HTML `<br>` 标签，或通过
CSS 插入
换行：
```
css
.add-line-break::before {
content: "\a"; /* \a 表示
换行符 */
white-space: pre; /* 必须设置 white-space 才能生效 */
display: block;
}
```
```html
<p>第一行<span class="add-line-break"></span>第二行</p>
```
---
### 5. Flex/Grid 布局中的
换行
对于 Flex 容器内的项目
换行：
```
css
.flex-container {
display: flex;
flex-wrap: wrap; /* 允许
换行 */
}
.flex-item {
flex: 1 1 200px; /* 最小宽度 200px 后
换行 */
}
```
---
### 总结：最佳实践（适用于中文文本）
```
css
.auto-wrap {
white-space: pre-wrap; /* 保留原始
换行并自动
换行 */
word-break: break-word; /* 长词
换行（现代浏览器用 break-word） */
overflow-wrap: break-word; /* 推荐写法 */
word-wrap: break-word; /* 兼容老浏览器 */
}
```
---
### 解释：
- `white-space: pre-wrap`：保留你在 HTML 或 JS 中写的 `\n`
换行符，并且内容超出时会自动
换行。
- `overflow-wrap: break-word`：防止超长单词（如 URL）撑破布局。
- `word-break: break-all` 可用于表格中强制
换行，但可能影响可读性。
---
### 相关问题示例：
扫一扫
894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
