× 目錄 [1]white-space [2]word-wrap [3]word-break 前面的話 CSS3新增了兩個換行屬性word-wrap和word-break。把空白符和換行放在一起說，是因為實際上空白符是包括換行的，且常用的文本不換行是使用的空白符的屬性white-space: now ...
×
目錄
[1]white-space [2]word-wrap [3]word-break前面的話
CSS3新增了兩個換行屬性word-wrap和word-break。把空白符和換行放在一起說，是因為實際上空白符是包括換行的，且常用的文本不換行是使用的空白符的屬性white-space: nowrap;但到底它們還有些什麼屬性值，以及有什麼對應的用法。本文將就空白符和換行的內容做詳細介紹和梳理
空白符
定義
空白符是指空格、製表符和回車；HTML預設已經把所有空白符合併成一個空格。
white-space
值: normal | nowrap | pre | pre-wrap | pre-line | inherit
初始值: normal
應用於: 所有元素
繼承性: 有
normal: 合併空白符，允許自動換行 nowrap: 合併空白符，不允許自動換行 pre-line: 合併空白符(不包括換行符)，允許自動換行 pre: 不合併空白符，不允許自動換行 pre-wrap: 不合併空白符，允許自動換行
[註意]<pre>元素預設帶有樣式white-space: pre;
[註意]IE7-瀏覽器不支持pre-line和pre-wrap這兩個屬性值
<div>They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.</div>
文本換行
瀏覽器自身帶有文本自動換行的功能，文本容器的右側可以實現自動換行
對於英文來說，瀏覽器會在半形空格或連字元的地方自動換行，而不會在單詞的中間突然換行
對於中文來說，可以在任何一個文字後面換行，但瀏覽器碰到標點符號時，通常將標點符號以及其前一個文字作為一個整體進行換行
所以實際上，white-space解決不了長單詞或UTL地址的換行問題
word-wrap
word-wrap屬性用來實現長單詞或URL地址的自動換行
值: normal | break-word
初始值: normal
應用於: 所有元素
繼承性: 有
word-wrap:normal(瀏覽器只在半形空格或連字元的地方進行換行) word-wrap:break-word(截斷單詞換行，長單詞從下一行開始)
[註意]當white-space的值是nowrap或pre時，word-break和word-wrap屬性都失效
[註意]word-wrap在標準中被改為overflow-wrap，但由於相容問題，一般還是使用word-wrap
word-break
CSS3使用word-break屬性來決定自動換行的處理方法。通過具體的屬性設置，不僅可以讓瀏覽器實現半形空格或連字元後面的換行，而且還可以讓瀏覽器實現任意位置的換行。
值: normal | break-all | keep-all
初始值: normal
應用於: 所有元素
繼承性: 有
normal: 中文到邊界上的漢字換行，英文從整個單詞換行 break-all: 對於英文長單詞來說，會截斷單詞換行，長單詞占據當前行剩餘空間。但對於中文的處理，各瀏覽器不一致 [1]firefox及safari: 中文到邊界上的漢字換行，且允許標點置於段首 [2]IE及chrome: 中文到邊界上的漢字換行，但不允許標點置於段首 keep-all: 對於英文長文本不能換行，但對於中文的處理，各瀏覽器不一致 [1]firefox: 在空白符處換行 [2]IE及chrome: 在空白符及標點處換行 [3]safari: 不支持
[註意]移動端目前基本都不支持keep-all值
[註意]當word-break值為break-all時，word-wrap屬性失效；否則兩個屬性都起作用
表格
對於表單元格的長文本來說，使用word-wrap或word-break來強制換行需要設置table-layout:fixed
