其实最早的时候也考虑过这个问题，当时还在想需要判定文字的长度么，实在是傻到极点了，原来CSS中本来就有这个样式设置的。而今天正好看到了有这么一篇介绍，仔细看了下，感觉还不错，这里也把实验的结果记录下。
初始阶段：
<div style="width:200px;height:50px;background:yellow;"> comedycookidespitelovedescriptiondescription </div> <div style="width:200px;height:50px;background:blue;"> 四大四大四大阿艾弗森的法师打发第三方圣达达菲的冯绍峰打算打 </div>
这时的效果是什么呢，我们来看下：
这样我们可以看出，如果是英文字符的话，就会超出div的边界了，而汉字倒不会
解决办法：
有两个样式设置是可以解决这个问题的，分别是word-wrap和world-break
先来看第一种word-wrap:break-word;的实现效果
1、加入英文语句时，如果加入后一个单词会超出div范围，则将整个单词进行换行；
2、如果单词过长，但是同一个单词，它会进行断开换行；
而world-break则有两种方式，分别来看：
<div style="width:200px;height:50px;background:yellow;word-break:break-all;">i comedycookidespitelovedescriptiondescription</div> <hr/> <div style="width:200px;height:50px;background:blue;word-break:break-all;">四大 四大四大阿艾弗 森的法师打发第三方圣达达菲的冯绍峰打算打</div>
效果为：
1、后一个单词加入后可能超出div边界，先加入词填满div的宽度，超出的单词部分剩余的字母转入下一行；
2、一个单词超出的话就更不用说了，肯定会填满宽度再转入下一行呗。再来看第二种：
<div style="width:200px;height:50px;background:yellow;word-break:keep-all;">i comedycookidespitelovedescriptiondescription</div> <hr/> <div style="width:200px;height:50px;background:blue;word-break:keep-all;">四大 四大四大阿艾弗 森的法师打发第三方圣达达菲的冯绍峰打算打</div>
这种的效果又该如何呢，我们先来看下好了：
1、如果加入下一次后可能会超出边界，那就将整个的下一个次换行；
2、单独的一个单词的话，会保持单词的完整性，从而仍然可能会造成超出边界的情况
其实三种方式里我最喜欢的是第二种：word-break:break-all;可以将字符串进行截断，
而第一种同样可以实现换行效果，在单个单词长度都不长的情况下比较适用，word-wrap:break-word;
而第三种情况word-break:keep-all与第一种情况相似，却又不同，如果存在过长单词的话是无法实现效果的，所以不赞成使用来实现效果
就这样又学到了点东西，心情不错，开森..
