如何使div仅以其最大宽度包装，而不是因为其父容器被溢出？ [英] How to make divs wrap *only* at their max-width, and not because its parent container is being overflown?
问题描述
我有一个 parent 容器，该容器具有固定的大小，并且绝对位于其中的 child divs。子div的位置具有动态文本内容和最大宽度，并且可以自由移动，并且可以扩展到溢出：隐藏。
I have a parent container with a fixed size, and absolutely positioned child divs inside it. The position of the child divs have dynamic text content and a max-width and can move around freely, and extend outside of the parent, which is set to overflow: hidden. See the snippet at the bottom for illustration.
除了一个小问题之外，该方法还行得通：如果一个孩子部分地在右边的父容器外面伸出，其中的文本将自动换行，试图留在父容器中。我明确不希望这样做-如果孩子搬出父母，则不应因为其改变包装或大小，而应将其移出视野。父母应该简单地充当窗口。
This works fine except for one small problem: If a child partially sticks outside the parent container to the right, the text inside of it will wrap, trying to stay inside of the parent container. I do explicitly not want this - if a child moves out of the parent, it should not change its wrapping or size because of it, it should just move out of view. The parent should simply act as a "window" of sorts through which the children are viewed.
我尝试了将 white-space：nowrap 应用于父级和/或孩子，到目前为止，这些孩子都没有为我工作。
I've tried different combinations of applying white-space: nowrap to the parent and/or children, none of which have worked for me so far. Is this just not possible?
此代码段演示了问题：
/* Relevant parent and child styles */
.parent {
position: relative;
width: 500px;
height: 400px;
overflow: hidden;
}
.child {
position: absolute;
max-width: 250px;
}
/* Individual positioning of child elements */
#fine {
top: 30px;
left: 100px;
}
#wrapped {
top: 90px;
left: 400px;
}
#unwrapped {
top: 330px;
left: 170px;
white-space: nowrap;
}
/* The rest is only styles to make the example easier on the eye */
body {
background-color: hsl(0, 0%, 90%);
margin: 0;
padding: 24px;
}
.parent {
background-color: white;
border: 2px solid grey;
}
.child {
padding: 12px;
background: yellowgreen;
}
<div class="parent">
<div id="fine" class="child">
Text should be wrapped normally with the max-width of the child, like this
</div>
<div id="wrapped" class="child">
This text will be wrapped much earlier though because it is running out of the parent container
</div>
<div id="unwrapped" class="child">
"white-space: nowrap" only prevents *all* wrapping
</div>
</div>
推荐答案
不要使用 left 定位元素，而应考虑翻译。左属性将限制元素的宽度。
Don't use left to position the element but consider translate instead. The left property will restrict the width of your element.
/* Relevant parent and child styles */
.parent {
position: relative;
width: 500px;
height: 400px;
}
.child {
position: absolute;
max-width: 250px;
}
/* Individual positioning of child elements */
#fine {
top: 30px;
transform: translateX(100px);
}
#wrapped {
top: 90px;
transform: translateX(400px);
}
#unwrapped {
top: 200px;
left: 170px;
}
#extra {
top: 300px;
left: 170px;
}
/* The rest is only styles to make the example easier on the eye */
body {
background-color: hsl(0, 0%, 90%);
margin: 0;
padding: 24px;
}
.parent {
background-color: white;
border: 2px solid grey;
}
.child {
padding: 12px;
background: yellowgreen;
}
<div class="parent">
<div id="fine" class="child">
Text should be wrapped normally with the max-width of the child, like this
</div>
<div id="wrapped" class="child">
This text will be wrapped much earlier though because it is running out of the parent container
</div>
<div id="unwrapped" class="child">
"white-space: nowrap" only prevents *all* wrapping
</div>
<div id="extra" class="child">
short text
</div>
</div>
或考虑较大的负边距（至少等于最大宽度）来否定使用left：
Or consider a big negative margin (at least equal to max-width) to negate the use of left:
/* Relevant parent and child styles */
.parent {
position: relative;
width: 500px;
height: 400px;
}
.child {
position: absolute;
max-width: 250px;
margin-right:-250px;
}
/* Individual positioning of child elements */
#fine {
top: 30px;
left:100px;
}
#wrapped {
top: 90px;
left: 400px;
}
#unwrapped {
top: 200px;
left: 170px;
}
#extra {
top: 300px;
left: 170px;
}
/* The rest is only styles to make the example easier on the eye */
body {
background-color: hsl(0, 0%, 90%);
margin: 0;
padding: 24px;
}
.parent {
background-color: white;
border: 2px solid grey;
}
.child {
padding: 12px;
background: yellowgreen;
}
<div class="parent">
<div id="fine" class="child">
Text should be wrapped normally with the max-width of the child, like this
</div>
<div id="wrapped" class="child">
This text will be wrapped much earlier though because it is running out of the parent container
</div>
<div id="unwrapped" class="child">
"white-space: nowrap" only prevents *all* wrapping
</div>
<div id="extra" class="child">
short text
</div>
</div>
要了解这两种技巧的工作原理，您需要参考规范，您可以在其中找到用于计算元素宽度的公式：
To understand how both tricks work you need to refer to the specification where you can find the formula to calculate the width of your element:
确定这些元素使用的值的约束是：
The constraint that determines the used values for these elements is:
'left'+'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+ 'border-right-width'+'margin-right'+'right'=包含块的宽度
您可以然后读取不同的情况，其中指定了一些值，而另一些 auto
You can then read the different case where some values are specified and other auto
这篇关于如何使div仅以其最大宽度包装，而不是因为其父容器被溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
