关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=ik2ih2j&title=%E5%85%B3%E4%BA%8E%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91%E4%B8%ADdiv%E6%A0%87%E7%AD%BE%E4%B8%AD%E8%AE%BE%E7%BD%AE%E5%AE%BD%E5%BA%A6%E5%90%8E%E5%85%B6%E4%B8%AD%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9A%84%E5%8E%9F%E5%9B%A0%E5%92%8C%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95

一.问题产生的原因

　　当我们为div标签声明了宽度，但是仍然会出现文本越界的情况，不知道大家有没有发现，只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况，结果如下：

 

　　①当文本内容为纯数字或者字母：

　　②当文本内容为汉字：

 

　　　　所以我们可以得出结论：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

 

二.解决方法

　　①word-wrap:break-word 　　　　(例如div宽200px，它的内容就会到200px自动换行）

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

　　下面让我们来测试一下

　　这样我们就可以看见字母自动换行了！！！

 

本文转载于:猿2048➵https://www.mk2048.com/blog/blog.php?id=ik2ih2j&title=%E5%85%B3%E4%BA%8E%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91%E4%B8%ADdiv%E6%A0%87%E7%AD%BE%E4%B8%AD%E8%AE%BE%E7%BD%AE%E5%AE%BD%E5%BA%A6%E5%90%8E%E5%85%B6%E4%B8%AD%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9A%84%E5%8E%9F%E5%9B%A0%E5%92%8C%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95

转载于:https://my.oschina.net/u/4181724/blog/3093644