如何使 div 仅在其 max-width 处换行，而不是因为其 parent 容器溢出？

Question

我有一个固定大小的 parent 容器，并且在其中绝对定位了 child 个 div。 child div 的位置有动态文本内容和一个 max-width 并且可以自由移动，并延伸到设置为 overflow: hidden 的 parent 之外。请参阅底部的代码段以获取说明。

除一个小问题外，这工作正常：如果 child 部分粘在 parent 容器的右侧，它里面的文本会换行，试图留在 parent 容器的内部=39=]容器。我确实不希望这样——如果 child 移出 parent，它不应该因此改变它的包装或大小，它应该只是移出视野。 parent 应该简单地充当“window”的角色，通过它可以查看 children。

我尝试了将 white-space: nowrap 应用于 parent and/or children 的不同组合，none 目前为止对我有用.这不可能吗？

这个片段演示了问题：

/* 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>

Answer 1

不要使用 left 来定位元素，而是考虑翻译。左侧属性将限制元素的宽度。

/* 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>

或者考虑一个大的负边距（至少等于max-width）来否定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>

要了解这两个技巧的工作原理，您需要参考 the specification，您可以在其中找到计算元素宽度的公式：

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' = width of containing block

然后您可以阅读不同的情况，其中指定了一些值和其他 auto

如何使 div 仅在其 max-width 处换行，而不是因为其 parent 容器溢出？

How to make divs wrap only at their max-width, and not because its parent container is being overflown?

html

css

word-wrap

如何使 div *仅*在其 max-width 处换行，而不是因为其 parent 容器溢出？

How to make divs wrap *only* at their max-width, and not because its parent container is being overflown?

html

css

word-wrap

如何使 div 仅在其 max-width 处换行，而不是因为其 parent 容器溢出？

How to make divs wrap only at their max-width, and not because its parent container is being overflown?