html - 自动拆分 DIV 容器内的长单词，但更喜欢在空格处换行

Question

我在父 div 中有某种较小的侧容器，#sideNavContainer，另一侧(右侧)是内容的另一个 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;
}

fiddle :https://jsfiddle.net/qp74uxkt/11/

我的愿望/期望是文本会在“I am a very long Text”之后中断，然后在下一行继续“andIevenContain ...”，然后这个长词可以在结尾中断可用空间，基于父容器的限制。当我使用“连字符:自动；”时，这也不起作用。这甚至可以做到吗？

Answer 1

您可以将分词属性设置为分词。我已经更新了您的代码并创建了一个新的 fiddle 。我认为它会解决你的问题检查一下 https://jsfiddle.net/yvLb6zer/