html - 强制子级 float 父​​级宽度

Question

关于强制嵌套 div 子级填充其父容器的宽度有很多问题，但我的问题是如何强制子级 div 的自然流动宽度大于其父容器(例如，子 div 包含一个文本节点，最终将子节点拉伸(stretch)到父容器的宽度之外)以保持其父容器的宽度？

一个简单的非动态解决方案是在父级上设置宽度，但是如果宽度不是预先确定的(出于响应原因)怎么办？我是否可以向子元素添加一些标签，以确保它们包装其内容并强制元素保持在父元素的宽度内？`

<div class="parent"> //Width is not set
    <div class="child">Here might be a long string of dynamic text</div>
</div>

我知道通过在父元素上设置宽度可以解决此问题，但在我的情况下，我不能这样做，因为该元素设置为根据屏幕尺寸调整其宽度。因此，例如，如果用户使用手机并从纵向变为横向，则父元素必须能够调整大小，而我宁愿不必为此使用 JavaScript。

我还应该提到，在我的特定情况下，父元素是一个 float 元素。我不确定这是否重要。

Answer 1

为什么不使用 max-width CSS 属性？ Div，特别是这里的子元素，是一个 block 级元素，应该将其自身限制在父 div 的宽度内。如果下面的代码没有帮助，我们将需要您扩展您正在处理的内容。

.child {
max-width: 100%
}

在你的样式表中尝试一下，看看 CSS 的魔力!干杯