前提：文本的父容器是塊級元素。首先，我們來整理一下與換行有關的3個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;
}

無論是在學習web前端開發，還是已經工作的，這裏推薦一下我們的前端學習交流群：784783012 ，這裏是把夢想照亮的地方，同為了生活而拼搏奮鬥，大家互相幫助。新手加入即可獲得經過整理的最前沿的前端技術資料，不定時更新技術，與企業需求同步。好友都在裏面交流，歡迎加入

點擊：加入

CSS文本、空白換行