CSS white-space用法及代碼示例

CSS中的空白屬性用於控製文本換行和white-spacing。此屬性中有多種類型的值可以使用。

用法:

white-space:normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

屬性值：

normal:這是此屬性的默認值。當CSS的空白屬性設置為normal時，兩個或多個white-spaces的每個序列都將顯示為單個空白。元素中的內容將在需要時進行包裝。
用法：

white-space:normal;

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | white-space Property 
    </tile> 
    <style> 
        div { 
            width:500px; 
            height:500px; 
            white-space:normal; 
            background-color:limegreen; 
            color:white; 
            font-size:80px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <div> 
            Geeks For Geeks:
            <br> 
            A Computer Science Portal For Geeks. 
        </div> 
    </center> 
</body> 
  
</html>

輸出：

具有正常值的空白屬性CSS

nowrap:當CSS的空白屬性設置為nowrap時，兩個或多個white-spaces的每個序列將顯示為單個空白。除非明確指定，否則元素中的內容不會換行。
用法：

white-space:nowrap;

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | white-space Property 
    </tile> 
    <style> 
        div { 
            width:300px; 
            height:300px; 
            white-space:nowrap; 
            background-color:lightgreen; 
            color:black; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <div> 
            Geeks For Geeks:  
            A Computer Science Portal For Geeks. 
        </div> 
    </center> 
</body> 
  
</html>

輸出：

具有nowrap值的空白屬性

pre:此值使空格與HTML中的<pre>標簽具有相同的效果。僅當使用換行符指定時，元素中的內容才會換行。句法：

white-space:pre;

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | white-space Property 
    </tile> 
    <style> 
        div { 
            width:300px; 
            height:300px; 
            white-space:pre; 
            background-color:lightgreen; 
            color:black; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <div> 
            Geeks For Geeks:
            A Computer   science portal    for geeks. 
        </div> 
    </center> 
</body> 
  
</html>

輸出：

具有預值的空白屬性

前行：當CSS的空白屬性設置為行前值時，兩個或多個white-spaces的每個序列將顯示為單個空白。元素中的內容將在需要時以及在明確指定時進行包裝。
用法：

white-space:pre-line;

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | white-space Property 
    </tile> 
    <style> 
        div { 
            width:300px; 
            height:300px; 
            white-space:pre-line; 
            background-color:lightgreen; 
            color:black; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <div> 
            Geeks For Geeks:    A science portal for geeks. 
        </div> 
    </center> 
</body> 
  
</html>

輸出：

空格屬性的行前值

預包裝：當CSS的空白屬性設置為前行值時，white-spaces的每個序列都將按原樣顯示。元素中的內容將在需要時以及在明確指定時進行包裝。
用法：

white-space:pre-wrap;

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | white-space Property 
    </tile> 
    <style> 
        div { 
            width:300px; 
            height:300px; 
            white-space:pre-wrap; 
            background-color:lightgreen; 
            color:black; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <div> 
            Geeks For Geeks:    A science portal for geeks. 
        </div> 
    </center> 
</body> 
  
</html>

輸出：

空格預包裝值

initial:此值將空白屬性設置為默認值。
用法：
```
white-space:initial; 
```
inherit:此值將空白屬性設置為父元素的值。
用法：
```
white-space:inherit; 
```

支持的瀏覽器：下麵列出了空白屬性支持的瀏覽器：

chrome ：1.0
邊：8.0
的Firefox：3.5
Opera ：9.5
Safari：3.0

相關用法

注：本文由純淨天空篩選整理自roshalmoraes大神的英文原創作品 CSS | white-space Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。