關於white-space、word-break和break-wrap
一直以來都只是知道這三個屬性都可以在某種情形下控制是否換行,但具體該使用哪一個屬性不是很清楚,實戰時就一個個試,哪個管用用哪個,今天整理了一下這三個屬性具體的意義。
一、white-space
white-space 是用來設定如何處理元素內的空白的,這裡的空白不僅僅指的空格,還包括換行符,所以它才能對文字是否換行有所控制。他的可選值和對應的描述如下:
1.normal:預設。空白會被瀏覽器忽略。也即是我們通常所知的連續的空白會合併為一個空格,行首的空格會完全忽略
2.pre:空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。
3.nowrap:文字不會換行,文字會在在同一行上繼續,直到遇到 <br> 標籤為止。
4.pre-wrap:保留空白符序列,但是正常地進行換行。實際使用時跟pre作用類似
5.pre-line:合併空白符序列,但是保留換行符。
二、word-wrap
word-wrap 屬性允許長單詞或 URL 地址換行到下一行。他的可選值和對應的描述如下:
1.normal:只在允許的斷字點換行(瀏覽器保持預設處理)。即使單詞長度超過容器寬度也不換行。
2.break-word:在長單詞或 URL 地址內部進行換行。
三、word-break
word-break 屬性規定自動換行的處理方法。他的可選值和對應的描述如下:
1.normal:使用瀏覽器預設換行規則
2.break-all:允許在單詞內換行。
3.keep-all:只能在半形空格或連字元處換行。
單從介紹來看,word-wrap:break-word和word-break:break-all似乎是一樣的,都是允許單詞內換行,但兩者有著很重要的不同之處。
首先要明確一點,word-wrap:break-word是針對長單詞或者連續字串的,它只有在單個單詞長度超過容器寬度的時候才會起作用。
而word-break:break-all不一樣,它是針對一行文字的,normal下,當一行文字超過容器寬度時會將最後一個單詞放到下一行顯示,而break-all會將最後一個單詞斷行顯示,以最大程度的鋪滿第一行。