我有一个较小的侧容器，#sideNavContainer在父 div 中，另一侧（右侧）是内容的另一个 div。
当我将文本放入#sideNavContainer包含很长没有空格的单词时，这些单词开始脱离容器并覆盖右侧（内容区域）的内容。
我试图强制 的内容#sideNavContainer分解这些单词，以便它们在下一行继续，当它们到达容器的右端但我不是 100% 满意，因为我期望单词/句子也应该是最好在空间上打破。长词应该从下一行开始，然后被分解，而不是与其他文本在同一行开始（在空格之后），然后继续（但被分解）。
这是一些示例，希望能说明我的意思：
<div>
<div id="sideNavBox">
<span>Navigation and other Stuff</span>
<div id="subContainer">
I am a very long Text andIevenContainVeryLongWordsWithout spaces but my parent container(s) should not ChangeTheirWidthBecauseOfThis and break whenThereAreSpaces but longWordsWithoutSpaces shouldBeBrokenDown.
</div>
</div>
<div id="contentBox">
Hello, I am the main content
</div>
</div>
CSS：
body {
background-color: green;
}
#sideNavBox {
float: left;
margin-left: 20px;
width: 180px;
background-color: blue;
}
#subContainer {
background-color: grey;
word-break: break-all;
}
#contentBox {
background-color: yellow;
}
小提琴：https ://jsfiddle.net/qp74uxkt/11/
我的愿望/期望是文本会在“我是一个很长的文本”之后中断，然后在下一行继续“andIevenContain ...”，然后这个长词可以在可用空间的末尾被打破，基于父容器的限制。当我使用“连字符：auto;”时，这也不起作用。这甚至可以做到吗？
