关于子元素连续数字和英文内容溢出父元素的问题

今天在写博客的时候，想写一些代码作为例子进行验证，但是遇到了一个问题。下面是问题代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>例子</title><style type="text/css">#box1{width: 400px;height: 400px;background-color: yellow;}</style></head><body><div id="box1"><p>111111111111111111111111111111111111111111111111</p><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p>11111111 111111 1111111111 111111 111 1111 111 1 111 111 111</p><p>aaaa aaaaa aaa aaaa aaaaaaaaa aaa aaaa aa aaa aa aaa aaa aaa</p><p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p></div></body>
</html>

效果如图：

可以看出p元素里面的内容如果是连续的英文或者连续的数字，它的内容会溢出父元素，而文字却不会，这是为什么呢？

原来，浏览器将连续的英文或者数字当作一个长单词，对于长单词溢出，浏览器不会默认换行。
好在有下面两个CSS属性可以解决这种问题：

word-break: break-all;允许在单词内换行；
word-wrap: break-word;允许长单词换行到下一行。

我们来测试一下：
给代码中的box1加上word-break: break-all;。
效果如图：

把word-break: break-all;改为word-wrap: break-word;。
效果如图：

可以看出两种属性都可以修复连续数字或英文的溢出问题。

关于子元素连续数字和英文内容溢出父元素的问题相关推荐

父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
【疑点】当子元素全部浮动时，怎么解决父元素塌陷的问题？
[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? 参考文章: (1)[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? (2)https://www.cnblogs.com/roashley ...
当子元素设置position absolute的时，父元素必须设置position属性
当子元素设置position absolute的时,父元素必须设置position属性.
@css flex 布局子内容将父元素撑开
flex 布局子内容将父元素撑开遇到的问题: 需要显示的文本是通过富文本编辑器提交是文本(包含了p标签),展示时通过flex布局实现.如下图: 但是通过flex布局实现后发现文本内容过长时将后半部分 ...
深入理解CSS之如何使子元素撑宽设置了 block 的父元素
深入理解CSS之如何使子元素撑宽设置了display: block; 的父元素先写一个模板,晚点再吐槽吐槽实现原理与更多支持的属性不想使父级的块属性消失怎么办这种属性规则有什么作 ...
CSS垂直方向布局中，子元素溢出父元素，如何处理？
默认情况下,父元素的高度是被子元素撑开的,若父元素设置了,就是设置多少就是多少子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出, 使用overflow属性设置 ...
jQuery获取元素上一个、下一个、父元素、子元素
jQuery获取: jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span") ...
子元素设置position:fixed，z-index大于父元素依然被父元素盖住
在项目中遇到一个奇怪的问题,当父元素样式overflow有滚动条.borde-radius存在.position不为static时,和z-index不为auto时,子元素的position就算是fix ...
html超出父元素,【Web前端问题】HTML CSS:子元素什么时候可以超出父元素限制的范围?...
疑问: 子元素什么时候可以同时从水平和竖直方向超出父元素的范围? 什么时候会从水平方向超出? 什么时候会从竖直方向超出? 首先,在HTML中,一个父元素包裹着一个子元素第二步:在CSS中设置父元素和 ...

关于子元素连续数字和英文内容溢出父元素的问题

关于子元素连续数字和英文内容溢出父元素的问题相关推荐

最新文章

热门文章