一、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