CSS定義 - white-space: 空白與換行處理

版本: CSS1.0
瀏覽器: 

• :IE7不支援:inherit, IE8需定義!DOCTYPE才支援,IE9直接支援. 
• :支援
• :支援
• :支援
• :支援

Example:

測試內容

this is  a      book.this is  a      book.this is  a      book.this is  a      book.this is  a      book.this is  a      book.
this is  a      book.this is  a      book.this is  a      book.this is  a      book.this is  a      book.
this is  a      book.this is  a      book.this is  a      book.this is  a      book.
this is  a      book.this is  a      book.this is  a      book.
this is  a      book.this is  a      book.
this is  a      book.

white-space:normal

預設顯示模式:多個空白會自動合併1個空白,超過欄位寬度部分自動判斷換行.

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:nowrap

強制不換行,在同一行內顯示所有內容,不使用overflow:auto時,文字將超過畫面外.  

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:pre

保留原始顯示內容,換行以\n的方式,效果等同<pre>標籤

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:pre-line

多空白會自動合併成功白,超過欄位寬度部分或\n符號會自動換行,與預設值差別在於看得懂\n符號.

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:pre-wrap

不合併連續的空白,超過欄位寬度的部分會自動換行,蠻適合顯示程式碼的時候使用.

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:inherit

繼承上一層元素的設定方式,此例上一層沒有定義時,等於default(normal),因為IE7/IE8的支援度問題,建議還是直接指定.

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.