• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

数字、英文和链接溢出div和p等块级元素不换行的解决办法

代码笔记 barben 5个月前 (04-12) 253次浏览 0个评论

问题起源


昨天经理突然找我,说项目中有一个样式写炸了,不会自动换行。

我就去看了下,觉得很奇怪,正常输入中文的情况下自动换行都正常,怎么一个比较长的链接就能自带溢出这种操作的???

折腾历程

在经历了很多次百度…
p标签自动换行 百度一下
p标签里的链接不换行 百度一下
又看了一遍 overflow 属性…

都没有得到答案,好像关键词有那么点不对!!!我能怎么办啊我也很无奈啊!!!

解决方法

最后还是发现了这个问题:

和中文字符不一样的是,一个连续的数字或者英文字母并不会随着你定义了宽高的盒子实现自动换行。


因此你需要借助CSS样式来解决这个问题使它们能够强制换行。

word-wrap: break-word;


给代码中的对应标签设置此样式即可!!!


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
数字、英文和链接溢出div和p等块级元素不换行的解决办法 - https://www.barben.cn/code/424.html
喜欢 (8)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址