不一样浏览器下word-wrap,word-break,white-space强制换行和不换行总结

强制换行与强制不换行用到的属性

咱们通常控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性能够说是专为了文字断行而创造出来的。首先咱们得知道这三个属性究竟是作什么用地：

word-wrap语法：

word-wrap: normal(默认) | break-word

各个浏览器均能识别

参数：

normal: 容许内容顶开指定的容器边界。

break-word: 内容将在边界内换行。必要时会触发word-break（注意：请分辨清楚word-break和break-word这俩个是不一样的东西，一为属性另为参数）。

说明：

word-wrap是控制是否“为词断行”的，设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题，英文语句也没问题。可是对于长串的英文，就不起做用。

范例：

congratulation这个单词属于长串英文，word-wrap:break-word整个单词当作一个总体，若是该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断，这就是对于长串文字不起做用的解释。word-wrap:normal是默认状况，英文单词不被拆开。

结论：

做用范围仅为div这类标准块级元素，th,td这类table元素虽然识别可是没有效果（若是为td,th加上宽度word-wrap在IE下是可以发挥效果的，但根据彻底兼容性方便记忆角度上来讲仍是之前面的结论为准）。

word-break语法：

word-break: normal(默认) | break-all | keep-all

Firefox、Opera不能识别

参数：

normal: 依照亚洲语言和非亚洲语言的文本规则，容许在字内换行。 break-all: 该行为与亚洲语言的normal相同。也容许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 keep-all: 与全部非亚洲语言的normal相同。对于中文，韩文，日文，不容许字断开。适合包含少许亚洲文本的非亚洲文本。

说明：

word-break:break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题（偏偏弥补了上面word-wrap:break-word对于长串文字不起做用的缺陷）。

范例：

继续以上面congratulation这个单词属于长串英文，word-break:break-all它会把单词截断，该行末端就会变成相似conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。 word-break:keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）

结论：

做用范围仅为div这类标准块级元素，th,td这类table元素虽然识别可是没有效果（经测试Chrome下word-break:break-all是有效果的，但根据彻底兼容性方便记忆角度上来讲仍是之前面的结论为准）。Firefox,Opera是没法识别word-break的，更不用提Firefox下的th,td中使用word-break的效果了。

white-space语法：

white-space: normal(默认) | pre | nowrap

参数：

normal: 默认。空白会被浏览器忽略。 pre: 空白会被浏览器保留。其行为方式相似HTML中的pre标签。 nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。

说明：

对于pre属性，其实就是HTML中连续的多个空白符会被合并，而后为了避免让他合并（最经常使用的场合就是表示代码文字缩进）让其中的空白符继续保留而不须要咱们增长额外的样式和标签来控制它的缩进和换行。pre标签的原理也是同样的内部默认有了个white-space:pre。 对于nowrap属性，这个是强制不换行核心，通常强制不换行就是利用这个属性。Firefox的div和td中，以及IE的div中，均没有问题。惟一的瑕疵就是在IE的td中会有一个问题，若是td没有指定宽度，则nowrap仍然有效，若是td有宽度，而且文字中无标点、无空格（例如中文长串文字），nowrap则再也不有效。解决方式就是能够加word-break:keep-all;能够解决此问题。

---

==总结强制换行==：

若是在div这类标准块级元素中须要强制换行，最广泛的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺点就是会致使若是恰巧该行末端宽为一个长串英文单词，那么该单词会被撕开的尴尬样式(并且FF不识别word-break，反而不会撕开这个单词)。我的认为若是你这个div里面放的相似于URL这个长串地址，那么用此方案是很是不错的选择（注意：因为FF不识别word-break，因此没法保证每行末端会整齐的断开URL单词，但这也是无奈的选择）。若是不是放置URL这类能够断开的长串英文，而是英文句子的话，那么使用word-wrap:break-word;便可。至于网上看到有word-wrap:break-word; overflow:hidden;这么个写法，听说能够兼容IE和FF，但通过亲自测试彷佛没有什么特别效果。固然，若是你有更好的方案也能够留言参与讨论，这里也十分欢迎您的意见。 若是是在td,th这类table元素中须要强制换行，我的比较推荐的方式为：先为table设定table-layout:fixed，基本上设定完这个属性后基本的换行问题都可以解决而不会出现table中td,th由于里面各个内容的多寡发生抢夺其余td,th宽度的情形发生。这时若是你依旧有强制换行问题，那么在此td中内部加一层div，那么状况就会像上面讨论的方式来解决。

---

==总结强制不换行==：

强制不换行的问题到是比较容易分析的，就如上面所讨论的那样使用white-space:nowrap，Firefox的div和td中，以及IE的div中，均没有问题。惟一的瑕疵就是在IE的td中会有一个问题，若是td没有指定宽度，则nowrap仍然有效，若是td有宽度，而且文字中无标点、无空格（例如中文长串文字），nowrap则再也不有效。解决方式就是能够加word-break:keep-all;能够解决此问题。综合下来，比较稳妥的方式是在文字与td之间再套一层div，而后使用nowrap，那么就是强制不换行。注意这时候颇有可能文字会过多致使溢出容器，因此你还得加一个overflow:hidden，防止溢出容器，这样子就能够兼容各个浏览器了。 总结了那么多，发觉彷佛也就那几个属性在浏览器里面的各类兼容性的平衡，如今彷佛还没有有一个完美的方案能够所有兼容各个浏览器，咱们所能作的最多的就是尽量的保持个浏览器显示一致。若是你仍是以为必定要兼容全部的浏览器，那么最后的方案那么就是动用JS了，之后的文章中我会考虑从以最小的JS代价来知足此要求，但这暂不在本文所讨论的范围内。 通常状况下，元素拥有默认的white-space:normal（自动换行，PS：不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子作的），超过容器宽度时就会把容器撑大，不换行。

解决方法（以IE，chrome,FF为测试浏览器）：

{
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/
}
复制代码

如下是对这两种方法的区别说明：

一、word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，若是该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

二、word-wrap:break-word 例子与上面同样，但区别就是它会把congratulation整个单词当作一个总体，若是该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

三、

word-break:break-all 支持版本：IE5以上 该行为与亚洲语言的 normal 相同。也容许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

word-wrap:break-word 支持版本：IE5.5以上 内容将在边界内换行。若是须要，词内换行( word-break )也将发生。表格自动换行，避免撑开。

语法：word-break : normal | break-all | keep-all

参数： normal : 依照亚洲语言和非亚洲语言的文本规则，容许在字内换行

break-all : 该行为与亚洲语言的normal相同。也容许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 与全部非亚洲语言的normal相同。对于中文，韩文，日文，不容许字断开。适合包含少许亚洲文本的非亚洲文本

语法： word-wrap : normal | break-word

参数： normal : 容许内容顶开指定的容器边界

break-word : 内容将在边界内换行。若是须要，词内换行（word-break）也行发生说明：设置或检索当当前行超过指定容器的边界时是否断开转行。

建议：word-break 用W3C检测会显示问题的，致使百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性能够用white-space:normal;来代替，这样在FireFox和IE下就都能正确换行，并且要注意，单词间的空格不能用 来代替，否则不能正确换行。

兼容 IE 和 FF 的换行 CSS 推荐样式

  最好的方式是word-wrap:break-word; overflow:hidden; 而不是word-wrap:break-word; word-break:break-all; 也不是word-wrap:break-word; overflow:auto;