CSS中的white-space屬性如何使用

# CSS中的white-space屬性如何使用

`white-space` 是CSS中用于控制元素內空白符（空格、換行符、制表符等）處理方式的屬性。合理使用該屬性可以解決文本換行、縮進等排版問題，提升內容的可讀性。

## 一、屬性值及作用

`white-space` 包含以下常用值：

1. **normal**（默認值）  
   - 合并連續的空白符
   - 文本自動換行
   - 示例：普通段落文本

2. **nowrap**  
   - 合并空白符，但禁止換行
   - 除非遇到`<br>`標簽或強制換行代碼
   - 典型應用：創建橫向滾動菜單

3. **pre**  
   - 保留所有空白符（類似`<pre>`標簽）
   - 僅在源碼換行處換行
   - 用途：顯示代碼片段時保留原始格式

4. **pre-wrap**  
   - 保留空白符但允許自動換行
   - 適合需要保留縮進又需適應容器的場景

5. **pre-line**  
   - 合并空白符但保留換行符
   - 自動換行+保留手動換行
   - 適用于詩歌等格式

## 二、實際應用示例

### 1. 禁止文本換行
```css
.menu-item {
  white-space: nowrap;
}

適用于導航欄項目需要保持單行顯示時。

2. 代碼高亮顯示

code {
  white-space: pre;
  font-family: monospace;
}

完美保留代碼中的縮進和換行。

3. 響應式文本處理

.article {
  white-space: pre-line;
}

在移動端既能保留段落換行，又能自動調整行寬。

三、注意事項

1. 與overflow-wrap/word-break配合使用時，注意瀏覽器兼容性
2. 表格單元格(td)中默認具有white-space: normal
3. 在Flex/Grid布局中可能需要額外設置min-width: 0來強制換行

四、瀏覽器支持

所有主流瀏覽器均完全支持該屬性，包括IE8+。移動端瀏覽器也無兼容性問題。

通過合理使用white-space屬性，開發者可以精確控制文本的空白顯示方式，解決常見的排版難題，特別是在需要保留原始格式或特殊換行需求的場景中效果顯著。 “`

注：本文約500字，采用Markdown格式，包含代碼塊、列表等標準語法，可直接用于技術文檔或博客發布。