一、word-wrap：同意對長的不可切割的單詞進行切割並換行到下一行。(中英文處理效果一樣)
word-wrap有兩個取值：
1、word-wrap: normal：僅僅在同意的斷字點換行（瀏覽器保持默認處理）。
2、word-wrap: break-word：在長單詞或 URL 地址內部進行換行。（即在容器末端有長單詞不能全然顯示，不會截斷單詞，而是作為總體，自己主動換行）
1: <!DOCTYPE>
2: <html lang="zh-en">
3: <head>
4: <title>CSS換行</title>
5: <meta http-equiv="content-type" content="text/html;charset=utf-8">
6: <style type="text/css">
7: div{
8: padding: 0;
9: margin: 0 auto;
10: width: 200px;
11: height: 100px;
12: border: 1px solid red;
13: }
14: </style>
15: </head>
16: <body>
17: <div>
18: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
19: </div>
20: </body>
21: </html>
默認情況下：
加入樣式：
1: word-wrap:break-word; //效果和上述一樣
二、word-break：規定非中日韓文本的換行規則。
(對中文正常換行，對英文依照例如以下說明處理)
word-break有三個取值：
1、word-break: normal：使用瀏覽器默認的換行規則。
（等價於word-wrap: normal）
2、word-break: break-all：同意在單詞內換行。（即在容器末端有長單詞不能全然顯示，會截斷單詞）
給div加入此規則
1: word-break:break-all;
效果：對sit進行了截斷處理
3、word-break: keep-all：僅僅能在半角空格或連字符處換行。
為了演示，在原文本的ipsum、dolor和sit之間增加一個連字符（-）
1: <div>
2: Lorem ipsum-dolor-sit amet, consectetur adipiscing elit.
3: </div>
效果：在ipsum后產生了換行
三、text-wrap：規定文本的換行規則。
text-wrap是CSS3屬性，有4個取值：
1、text-wrap：normal：僅僅在同意的換行點進行換行。
2、text-wrap：none：不換行。
元素無法容納的文本會溢出。
3、text-wrap：suppress：壓縮元素中的換行。瀏覽器僅僅在行中沒有其它有效換行點時進行換行。
4、text-wrap：unrestricted：在隨意兩個字符間換行。
PS：眼下主流瀏覽器都不支持 text-wrap 屬性。
來源：http://www.ido321.com/621.html