word-wrap:break-word与word-break:break-all的区别所在

通常在网页排版中会遇到文字换行的问题，一些人常常用到word-wrap:break-word;或word-break:break-all;对二者有些混淆概念，今天博主就来讲讲2者间的一点小差别。

一、对于中文，使用其一都能满足：

word-wrap:break-word;方式：

文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行
对应代码：
<div style="width:250px;border:1px solid #ccc;word-wrap:break-word;">文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行</div>

word-break:break-all;方式：

文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行
对应代码：

<div style="width:250px;border:1px solid #ccc;word-break:break-all;">文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行</div>

二、非中文(例如：英文，阿拉伯数字)，此时，2者就有了变化，前者会显示完成的单词；而后者在换行时会把单词拆开：
word-wrap:break-word;方式：

word-wrap:break-word;方式：

While our dream is confronted with the reality, you always feel painful. Just
trample on the pain, or you’ll be beaten down by it.

对应代码： <div style="width:260px;border:1px solid #ccc;word-wrap:break-word;">

While our
dream is confronted with the reality, you always feel painful. Just
trample on the pain, or you’ll be beaten down by it. </div>

word-break:break-all;方式：

While our dream is confronted with the reality, you always feel painful. Just
trample on the pain, or you’ll be beaten down by it.

对应代码： <div style="width:260px;border:1px solid #ccc;word-break:break-all;">

While our dream is confronted with the reality, you always feel painful. Just trample on the pain, or you’ll be beaten down by it. </div>

由此看来，我们在使用word-wrap:break-word;会比使用word-break:break-all;的效果更好一些。由于我给出的外框没有定高，如果定了高之后，框内的内容比较多的话就出超出框的边界，此时我们要加上overflow:hidden;属性，来隐藏多余的部分。完整写法：
word-wrap:break-word;overflow:hidden;

原文地址：http://blog.sina.com.cn/s/blog_a4e9028f0101fkt4.html