white-space詳解

【目錄】

• white-space詳解
  • 屬性介紹
  • 屬性使用
    • 一、列表溢出換行處理
    • 二、文字溢出省略處理
    • 三、文字展示

white-space 屬性設置處理元素內的空白，所謂空白有哪些？

Space(空格)、Enter(回車)、Tab(制表符)

我們熟知的是：

1. 在開發中，無論我們敲多少空格和回車，顯示在頁面上的都會合並成一個。
2. 我們的文字在超過一行的情況下，就會自動換行。

屬性介紹

但是開發的要求各種各樣，white-space的功能屬性也很強大，可以有各種各樣的不同效果，下面來看一張圖：

 

whiteSpace.png

這個古詩是怎么打出來的呢？

床(空格)前(空格)(空格)(空格)(空格)明月光，疑是地上霜
（回車）
舉頭望明月，低頭(Tab)思故鄉

下面一個表格來說明一下出現這種情況的原因：

屬性	效果	兼容
normal(默認)	所有空格、回車、制表符都合並成一個空格，文本自動換行	IE7\IE6+
nowrap	所有空格、回車、制表符都合並成一個空格，文本不換行	IE7\IE6+
pre	所有東西原樣輸出，文本不換行	IE7\IE6+
pre-wrap	所有東西原樣輸出，文本換行	IE8+
pre-line	所有空格、制表符合並成一個空格，回車不變，文本換行	IE8+
inherit	繼承父元素	IE不支持，不推薦用

屬性使用

一、列表溢出換行處理

同樣是320px的手機，iphone4可以在一行顯示，但是安卓端就會有錯位現象，這個開始讓我很頭疼：
ios端

 

row.png

andriod

 

overrow.png

這樣的話使用媒體查詢也無法處理，所以在這一行的父元素中設置，所有的元素強制一行顯示。

ul{ white-space: nowrap; /*強制內容在一行顯示*/ overflow:hidden; /*超出部分隱藏*/ } 

二、文字溢出省略處理

文字超出去怎么辦？

 

overtext.png

一般都自動換行了，想要文字溢出的部分自動用省略號表示，那么離不開三個屬性:

white-space: nowrap; /*強制內容在一行顯示*/ overflow: hidden;/*超出部分溢出*/ text-overflow: ellipsis;/*溢出的部分使用省略號*/ 

可以看到下面的效果:

 

overEllipsis.png

三、文字展示

如果是顯示詩歌，或者文案之類的，很多情況需要輸入什么樣子，出來什么樣子。

 

poetry.png

這個時候用pre屬性是最合適的(畢竟兼容性最好么):

white-space:pre;