CSS文本換行：white-space、word-break、word-wrap

三個涉及到文本換行的CSS:

1 white-space

屬性設定如何處理元素內的空白。

這個屬性聲明建立版面配置階段中如何處理元素中的空白符。

可能的值：

normal:預設，忽略空白符，忽略原有分行符號。自動換行，不會有捲軸

pre:保留空白符；保留分行符號，即保留原有格式

nowrap:忽略空白符，文本不換行，直到遇到</br>；

pre-wrap:保留空白符，自動進行換行，不會有捲軸

pre-line:合并空白符，保留分行符號；

 

2 自動換行word-break:break-all和word-wrap:break-word的區別

  word-break:break-all和word-wrap:break-word都是能使其容器如DIV的內容自動換行。
它們的區別就在於：
    1，word-
break:break-all
例如div寬200px，它的內容就會到200px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該
行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的後端部分了。
    2，word-wrap:break-word 例子與上面一樣，但區別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。
    word-break;break-all 支援版本：IE5以上  該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本。
    word-wrap:break-word 支援版本：IE5.5以上  內容將在邊界內換行。如果需要，詞內換行( word-break )也將發生。