CSS文字环绕图片所遇到的问题

<style type="text/css">
div{
width: 200px;
                float: left;
}

</style>

当把中间的文字替换成连续的英文字母时，出现问题了，如图

      

对于中文可以正常显示，但是一放全数字或者英文就不行了。

于是查找相关资料，测试结果后发现：

浏览器默认解析英文或者数字时，是按照单词进行解析。

也就是说，每个单词是一个整体，遇到空间不足时，不会对单词进行拆分。

所以才会出现上面这种情况。

解决方法

      思考：CSS里面有没有相关的属性，可以对文字进行强制换行呢？

              答案当然是有的：word-break: break-all;

      这样就可以解决问题了。

      

 

后记：word-wrap、word-break

      在查找资料的时候，发现还有个属性：word-wrap：break-word;  这咋还出现重复属性了呢？

     其实不然，又是一通查找资料，发现这俩还是有区别的：

     1) word-wrap : break-word ;

         --允许长单词换行到下一行。

         当一个单词长度超过div的宽度时，默认是不会换行的：如下图

         

         如果设置word-wrap : break-word;  这个单词就会进行换行显示

         

      2）word-break : break-all;

          -- 是否对单词进行断词处理。

          --个人理解就是： 它会把一个单词的每个字母拆分成独立的单元，

            这样就可以把它填充到每个地方，所以才能达到文字环绕图片的效果。