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

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

问题产生的原因

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

解决方法

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

方法一:

div{

word-wrap: break-word;

word-break: normal;

}

方法二:

div{

word-break:break-all;

}

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

你可能也喜欢

JavaScript classList() 属性和方法解释
怎样获得免费office365

JavaScript classList() 属性和方法解释

📅 07-29 👀 4232
微博怎么查看自己发的评论记录:电脑与手机端详尽指南
beat365手机版官方网站正规

微博怎么查看自己发的评论记录:电脑与手机端详尽指南

📅 06-22 👀 4895
八的五笔怎么打?
365bet官网平台网址

八的五笔怎么打?

📅 02-16 👀 206
特斯拉为什么那么贵?主要还是这几个原因
365bet官网平台网址

特斯拉为什么那么贵?主要还是这几个原因

📅 01-28 👀 8008
《神武4》玩家讨论:一代目贪狼有什么不同
365bet官网平台网址

《神武4》玩家讨论:一代目贪狼有什么不同

📅 08-30 👀 277
4400克等于多少千克
怎样获得免费office365

4400克等于多少千克

📅 08-10 👀 9589