当 child div 溢出时，将 child div 文本包装在 parent div 内

Question

我试图让 innerDiv 在文本超出 parent div 之前换行文本。让所有文本都显示在 innerDiv 中但又被换行的最佳方法是什么？

我试过使用以下内容，但它们并不是我想要的：

overflow-wrap: normal;
overflow-wrap: break-word;

我不知道如何 Google 这个问题。我猜我应该添加某种负填充或边距？

我弄乱了 innerDiv 的宽度，但当我改变位置时它会超出 parent 除非我溢出，但随后内容就消失了。

编辑：更改了标题，因为我最后一个没有提交的问题被记住了

Answer 1

尝试在内部 div 上设置 'max-width'。这将强制文本以您选择的宽度换行。

例如

#innerDiv {
  max-width: 200px;
}

Answer 2

将 max-width 添加到 #innerDiv 怎么样？在你的例子中

#innerDiv {
    position: relative;
    left: 150px;
    max-width: calc(100% - 150px);
    background: pink;
}

会成功的。

Answer 3

将此代码添加到 innerDiv 以使其适合 outerDiv，无论其宽度如何。

width: calc(100% - 150px);

（将 150px 替换为 innerDiv 的 left/right 偏移）

Answer 4

position: relative;
left: 100px;
background: pink;
/* width: 700px; */
width: calc(100% - 100px);

Answer 5

很多复杂的答案，但实际上是左边的 150px 导致它突出，所以用右边的边距取消它...

#innerDiv {
    position: relative;
    left: 150px;
    margin-right: 150px; /* add this */
    background: pink;
}

wrap child div text inside parent div when child div overflows