每天CSS學習之white-space

標籤：文本   span   cti   接下來   style   預設   idt   alt   換行   

white-space是CSS的屬性，其作用是規定文本不進行換行。

white-space有以下幾個值：

1、normal：該值為預設值，段落前後的空白會被瀏覽器忽略。如下所示：

<div style="width:200px;height:200px;white-space:normal;">    This is an Action!    </div>

我們在This的前面加了許多空白，在Action的後面也加了許多空白。但是結果如下：

 

 

2、pre：段落前後的空白會被瀏覽器保留，文本不會換行。如下所示：

 

 

3、nowrap：文本不會換行，直到遇到<br>標籤為止。如下所示：

先展示normal的結果：

<div style="width:10px;height:80px;white-space:normal;">    This is an Action!    </div>

結果：

如果換為nowrap，則：

<div style="width:10px;height:80px;white-space:nowrap;">    This is an Action!    </div>

結果：

 

4、pre-wrap：保留前後空白符，但是會進行正常的換行。如：

<div style="width:10px;height:80px;white-space:pre-wrap;">    Thisisan Action!    </div>

結果：

看到了沒？如果段落之間有空格，空格也會換行。

 

5、pre-line：合并空白序列符，但會保留分行符號。什麼意思呢？看到上面的pre-wrap的結果了嗎？接下來讓我們看一看pre-line的結果：

<div style="width:10px;height:80px;white-space:pre-line;">    This is an Action!    </div>

結果：

<div style="width:200px;height:80px;white-space:pre-line;">    This is an Action!    </div>

結果：

pre-line也就是說，將段落前後的空白符去掉，如果在換行的時候有空白符單獨一行的，將空白符也去掉。

 

 6、inherit：從父元素繼承white-space的屬性值。

 

 

 

每天CSS學習之white-space