完全搞懂CSS文本、空白換行問題

word-break

該屬性決定文本內容超出容器時，瀏覽器是否自動插入換行符。

屬性值：

• normal：默認換行規則——英文以詞爲單位換行，連續字符不換行，直接溢出父元素
• break-all：無視單詞，強制在父元素邊緣位置截斷（最省空間，看起來最整齊，但單詞可能被從中劈開）。另外連續的標點符號不會換行，不知爲什麼。。。
• keep-all：與normal同樣，並且連中日韓的連續文字也不換行了（有空格分隔時會換行）
• *break-word：這不是一個規範屬性，只有部分瀏覽器支持，效果同word-wrap: break-word;

 

word-wrap（overflow-wrap）

該屬性決定瀏覽器是否應該在一個沒法正常斷開的單詞內部插入換行符。

屬性值：

• normal：不在單詞內部插入換行符，即換行只發生在單詞間的空格等地方，不會截斷單詞。若是單詞超級長，則溢出父容器。
• break-word：『若是沒有合適的截斷點，那就可能在任意位置截斷單詞』。解釋一下：首先嚐試正常換行（這一行放不下就放到下一行），若是換行後仍是很長，就在任意位置截斷。注：連續的標點符號也會截斷。

 

white-space

該屬性決定瀏覽器如何處理空白和換行符。

屬性值：

• normal：默認行爲，換行符轉換爲空白，合併連續的空白，但必要時換行（所謂『必要』對於英文來講，指的是一個單詞後面的下一個單詞在該行末尾放不下了，得整個放到下一行去；對中文來講就是天然的換行）
• nowrap：其餘與normal同樣，但『必要』的換行也不作了，打死不換行
• pre：保留連續的空白，遇到換行符或br標籤時換行，但不自動插入換行符
• pre-wrap：保留連續的空白，在遇到換行符、<br>時換行，『必要』時自動插入換行符
• pre-line：合併連續的空白符，在遇到換行符、<br>時換行，『必要』時自動插入換行符

 

對這3個屬性的關係，個人理解以下：

首先，white-space決定了瀏覽器如何渲染換行符，若是它選擇無視換行符，那麼另外兩個屬性指導瀏覽器自動插入的換行符都無效；而它本身插入的換行符不受影響。

其次，word-break優先於word-wrap，由於瀏覽器首先會把單詞視爲一個總體。舉個例子：

word-break值爲normal或keep-all時，可能會有超長的單詞溢出容器。此時 word-wrap:break-word 會處理這種狀況，將該單詞從中間截斷，瀏覽器最終表現出來的效果是break-word。

而若word-break值改爲了break-all，那麼超長的單詞會被強制截斷，此時word-wrap就沒有用武之地了。瀏覽器最終表現出來的效果是break-all。

（PS：若是同時設了break-all和break-word，那麼一長串標點符號不會換行，緣由不詳。。。爲了長串標點能正常換行，建議只使用break-word）

 

所以，若是需求是這樣的（通常是UGC文本的展現）：

1. 換行符、空白都原樣顯示

2. 文本正常換行，不能溢出容器

 

那麼須要設置的屬性組合爲：

.text { white-space: pre-wrap; word-wrap: break-word; }