一、word-wrap使用：
语法：
word-wrap ： normal | break-word
取值说明：
1、normal和break-word，其中normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容器的边界，换句话说内容可以撑破容器）；
2、break-word将内容在边界内换行（不截断英文单词换行，截断英文单词换行需要使用word-break:all属性）,我们先来看两个简单的实例：
二、word-break使用：
上面我们使用word-wrap:break-word只能在内容中换行，而不能实现词内换行，前面提到过如果需要词内换行，我们需要使用word-break属性，下面我们就一起来看看这个属性：
语法：
word-break:normal | break-all | keep-all
取值说明
1、normal为默认值，如果设置为默认值时中文则到边界处的汉字换行，如果是英文整个单词换行，如果出现某个单词长度过长，则会撑破容器，如果边框为固定属性，则后面部分将无法显示；
2、break-all：可以强行截断英文单词，达到词内换行效果
3、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行，英文单词也整个换行，如果出现某个英文字符长度超过边界，则后面的部分将撑破容器，如果边框为固定属性，则后面部分无法显示
当以上word-wrap：break-word放在<pre>和<table>标签中时，在Firefox和Opera下是不会换行的，
三、white-space属性：
white-space语法
white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit
取值说明
1、normal：为其默认值。空白处会被浏览器忽略,往往可以通过设置这个值恢复到默认值下
2、pre:空白处会被浏览器保留，其行为方式就类似于HTML中的<pre>标签
3、nowrap:文本不会换行，文本会在同一行上，直到碰到了换行标签<br />为止，
4、pre-line:合并空白符序列，但保留换行符，此属性不支持IE7.0-,Firefox30-,Opera9.2-下以版本浏览器
5、pre-wrap:保留空白符序列，但是正常进行换行，此属性值不支技IE70-,Firefox3.0-版本浏览器，
6、inherit：规定应该从父元素继承white-space属性的值，此属性值在所有的IE版本都不支持
另外一点就是word-wrap和break-word直接应用在table中是没有效果的，为了解决这个bug,只能在table中加上下面的属性：
table {
table-layout: fixed;
width: 100px;/*设置表格宽度*/
}
一、pre标签自动换行：
pre{
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
二、td标签自动换行
table {
table-layout: fixed;
width: *** px;
}
table td {
overflow: hidden;
word-wrap: break-word;
}
三、除pre,td标签外其他标签自动换行：
element {
overflow: hidden;
word-wrap: break-word;
}
有人说使用下面这样的写法
element {
word-wrap: break-word;
break-word: break-all;
}
四、标签内容强制不换行：
element {
white-space: nowrap;
word-break: keep-all;
}
