css中设置了宽度，div内容溢出不换行的的原因和解决方法

问题产生的原因  

当我们为div标签声明了宽度，但是仍然会出现文本越界的情况，不知道大家有没有发现，只有文本内容为单词或者纯数字的时候才会出现这种情况。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

 

解决方法 

需要使用css中的word-wrap属性，目前所有主流浏览器都支持 word-wrap 属性。

方法一：

div{ 
   word-wrap: break-word; 
   word-break: normal; 
}

　　

 

方法二：

div{
   word-break:break-all;
}

　　

相比较于上面的方法，这种方法的好处在于假如在宽度的范围内的临界区存在一个完整的单词，它会保留一个完整的单词自动换行 。