当子 div 溢出时，将子 div 文本包装在父 div 中答案

【问题标题】：wrap child div text inside parent div when child div overflows当子 div 溢出时，将子 div 文本包装在父 div 中
【发布时间】：2017-02-11 23:45:21
【问题描述】：

我试图让 innerDiv 在文本超出父 div 之前包装文本。让所有文本显示在 innerDiv 中但也被包装的最佳方法是什么？

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

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

我无法弄清楚如何用 Google 搜索这个问题。我猜我应该添加某种负填充或边距？

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试在内部 div 上设置“最大宽度”。这将强制文本以您选择的宽度换行。

例如

#innerDiv {
  max-width: 200px;
}

【讨论】：

【解决方案3】：

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

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

会成功的。

【讨论】：

【解决方案4】：

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

width: calc(100% - 150px);

（将 150px 替换为 innerDiv 的左/右偏移量）

【讨论】：

【解决方案5】：

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

【讨论】：