如何让子div内容适配父div？屏幕缩放时不溢出父容器
你提到想让子div的内容适配父div，就算放大屏幕也不超出，而且试过overflow: hidden没效果，我来帮你梳理下可行的解决办法。
先看你的代码示例：
<div> <div title="childDiv" style="width:auto;"> <h3 class="headerwidth" style="margin-top:1px; margin-bottom:0px"> Test:</h3> Welcome to the this new page test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> </div>
问题出在几个地方，对应的解决方法如下：
给父div设置明确的尺寸约束：你当前的父div没有设置宽度或最大宽度，导致它会无限延伸来适应屏幕，子div自然也会跟着乱跑。可以给父div加上
style="width: 100%; max-width: 你的目标宽度;"（比如max-width: 900px），这样父div在小屏幕上占满宽度，大屏幕上不会超过你设定的最大宽度，子div也就有了明确的边界。确保文本自动换行（处理超长无空格内容）：如果你的内容里有连续无空格的字符串（比如很长的英文单词、网址），默认的换行规则会失效，导致子div被撑大。可以给子div加上
overflow-wrap: break-word;或者word-wrap: break-word;，强制把超长内容拆分成多行，不会超出容器。让
overflow: hidden生效的前提：overflow: hidden需要容器有确定的宽度（或者父容器有确定宽度）才能起作用。如果父div没有约束，子div的宽度会跟着内容走，overflow: hidden自然没用。先给父div设置好宽度/最大宽度，再给子div加上overflow: hidden;（如果需要隐藏溢出内容，而不是换行的话）。子div的宽度设置：子div的
width: auto可以保留，或者直接设为width: 100%;，这样它会自动继承父div的宽度，不会超出。
调整后的代码示例可以是这样：
<div style="width: 100%; max-width: 800px;"> <div title="childDiv" style="width:100%; overflow-wrap: break-word;"> <h3 class="headerwidth" style="margin-top:1px; margin-bottom:0px"> Test:</h3> Welcome to the this new page test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> </div>
这样不管屏幕怎么放大，子div都会被父div的最大宽度限制住，内容也会自动换行，不会超出范围啦。
内容的提问来源于stack exchange，提问作者user1030181
