CSS white-space

admin發表於2019-09-17
CSS

在其他很多文章反覆強調過，掌握一個知識點可以從其名稱入手。

因為其名稱在一定程度上體現它的功能，自然對white-space屬性的學習也不例外。

此屬性的名稱由兩個單詞構成，分別如下：

（1）.white：翻譯成函式具有"白或者白色"的意思。

（2）.space：翻譯成漢語具有"空間"的意思。

恰如其名，此屬性用來規定瀏覽器如何處理元素中的空白字元，比如使用空格鍵輸入的字元。

產生空白字元的方式有很多種，例如空格(" ")、換行("\n")、縮排("\t")等。

特別說明：

（1）.此屬性是CSS2.0增加，為了屬性排版介紹方便放入CSS3教程板塊。

（2）.CSS3.0對此屬性進行了一些加強，比如可以對<textarea>元素或者SVG元素生效。

CSS屬性通常都是非常簡單的，但總是讓人感覺比較繁瑣，尤其是當屬性值功能非常類似的時候。

下面分步通過程式碼例項詳細介紹一下white-space屬性值的功能，由此也可以體現它們之間的區別在哪。

語法結構：

[CSS] 純文字檢視 複製程式碼
white-space：normal | pre | nowrap | pre-wrap | pre-line

在對屬性值逐一分析之前，首先對屬性值涉及的單詞進行一下解析，有助於理解。

（1）.pre：是preserve的縮寫，表示"保留"的意思。

（2）.wrap：具有"盤繞或者包裹"的意思，也就是可以換行，自然nowrap就是不可以換行。

屬性值解析：

（1）.normal：預設值，多個空格會被合併為一個，換行被當做一個空格處理，根據容器寬度換行。

（2）.pre：規定保留空格，有幾個空格保留幾個空格，原始碼中的換行與<br>生效，不根據容器寬度換行。

（3）.nowrap：規定元素內的字串不換行，多個空格會被合併，原始碼中的換行無效，但是<br>生效。

（4）.pre-wrap：規定保留空格，原始碼中的換行與<br>生效，同時也根據容器寬度換行。

（5）.pre-line：規定合併空格，原始碼中的換行與<br>生效，同時也根據容器寬度換行。

如果看到上面的屬性闡述感覺還沒有完全明白，不用擔心，後面會有詳細的程式碼演示。

瀏覽器支援：

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

特別說明：當前只有在火狐瀏覽器中，此屬性才會對SVG元素生效。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width:250px;
  height:50px;
  background-color:#ccc;
  white-space:normal;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111559r8rl021zbrlw4afj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.多個空格會被合併為一個空格，字串會根據容器的寬度換行（連續數字或者字串可能會衝破佈局）。

（2）.程式碼內部的換行會被當做一個空格處理，<br>會生效（上面沒有演示，但是不要忽略）。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width:250px;
  height:70px;
  background-color:#ccc;
  margin:25px;
  white-space:pre;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
<div>JavaScript 
  is a programming<br> language</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111638xkqsy3w3ch6heqqy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.多個空格會被保留，有幾個空格保留幾個空格。

（2）.內容會衝破佈局不會自動根據容器寬度換行。

（3）.原始碼內的換行會生效，<br>標籤換行也會生效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width:250px;
  height:50px;
  background-color:#ccc;
  margin:25px;
  white-space:nowrap;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
<div>JavaScript 
  is a programming<br> language</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111701wmwuwztuy0uusipo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.多個連續的空格會被合併為一個，不會根據容器的寬度自動換行。

（2）.原始碼中的換行會被當做一個空格處理。

（3）.<br>標籤會生效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width:250px;
  height:70px;
  background-color:#ccc;
  margin:25px;
  white-space:pre-wrap;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
<div>JavaScript 
  is a programming<br> language</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111729hxd62jcjcz2ct3ea.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.多個空格不會被合併，有幾個算幾個。

（2）.內容會根據容器的寬度自動換行。

（3）.原始碼內的換行會生效，br換行也會生效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width:250px;
  height:70px;
  background-color:#ccc;
  margin:25px;
  white-space:pre-line;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
<div>JavaScript 
  is a programming<br> language</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111753m3rncfr2ynnxzngv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.行內的多個空格會被合併為一個空格。

（2）.會根據容器的寬度自動換行。

（3）.原始碼內的換行會被保留。

（4）.行首的空格被刪除。

（5）.br會生效，起到換行效果。

相關文章