css中设置了宽度,div内容溢出不换行的的原因和解决方法
问题产生的原因
当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况。原因是由于:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。
解决方法
需要使用css中的word-wrap属性,目前所有主流浏览器都支持 word-wrap 属性。
方法一:
div{
word-wrap: break-word;
word-break: normal;
}方法二:
div{
word-break:break-all;
}相比较于上面的方法,这种方法的好处在于假如在宽度的范围内的临界区存在一个完整的单词,它会保留一个完整的单词自动换行 。
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!