包裹孩子的div文本时，孩子的div溢出

问题描述：

我试图让innerDiv文本超出父格之前自动换行。如何让所有的文字在innerDiv中显示出来，但也被包裹起来？

我使用下面的尝试，但他们不完全是我正在寻找：

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

我无法搞清楚如何给Google这个问题。我猜是有一些负面的填充或余量我应该补充？

我已经搞乱了InnerDiv的宽度，但是当我改变位置时，它会超出父项，除非我溢出，但随后内容会消失。

编辑：更改标题，因为我的，我没有提出最后一个问题是想起

你可以添加'宽度'您的innerDiv –

答

很多复杂的答案，但实际上它是对导致它打出来的左侧150像素，所以取消它有一个保证金的权利...

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

答

尝试设置在内部的div一个“最大宽度”。这将迫使文本以您选择的宽度进行包装。

E.g.

#innerDiv { 
    max-width: 200px; 
}

哇，我很尴尬lol。 –

不要，这是我们如何学习:) –

哈..是啊，我一直在编码一段时间，只是卡住了愚蠢的东西，但我感谢帮助和鼓励。 –

答

如何添加max-width到#innerDiv？在你的例子

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

将做的伎俩。

啊，这就是我正在寻找的。谢谢。 –

答

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

width: calc(100% - 150px);

（替换为150px与任何左/右偏移innerDiv的）

答

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