自动分解 DIV 容器内的长词，但更喜欢在空格处换行
Automatically break up long words inside DIV container but prefer line breaking on spaces
我有一个较小的侧面容器 #sideNavContainer，在父 div 的另一侧（右侧）是另一个 div 的内容。
当我将文本放入包含很长单词但没有 space 的 #sideNavContainer 时，这些单词开始脱离容器并覆盖右侧（内容区域）的内容。
我试图强制 #sideNavContainer 的内容将这些单词打散，以便它们在到达容器的右端时继续下一行，但我不是 100% 满意，因为我希望 words/sentences 也应该最好在 spaces 上被打破。长词应从下一行开始，然后被分解，而不是与其他文本在同一行开始（在 space 之后），然后继续（但被分解）。
下面是一些示例，希望能说明我的意思：
<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/
我的 desire/expectation 是文本会在单词 "I am a very long Text" 之后中断，然后在下一行继续 "andIevenContain..." 并且这个长单词然后可以在结尾中断可用 space，基于父容器的限制。这在我使用 "hyphens: auto;" 时也不起作用。这甚至可以做到吗？
如果长词量不是太大，我建议不要使用任何word-break设置，而是将"soft hyphens"插入这些长词，位于语法正确的位置。
软连字符是一个看起来像这样的实体：­。因此，如果您有例如 whateverwonderfullongword，您可以将其更改为 what­ever­wonder­ful­long­word。如果它适合宽度，它将被写成一个整体，如果不是，如果不是，它将在 ­ 实体的最新可能位置处中断（用连字符），如下例所示。
<p>what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word</p>
您可以将分词 属性 设置为分词。我已经更新了您的代码并创建了一个新的 fiddle。我认为它会解决你的问题
Check it outhttps://jsfiddle.net/yvLb6zer/
我有一个较小的侧面容器 #sideNavContainer，在父 div 的另一侧（右侧）是另一个 div 的内容。
当我将文本放入包含很长单词但没有 space 的 #sideNavContainer 时，这些单词开始脱离容器并覆盖右侧（内容区域）的内容。
我试图强制 #sideNavContainer 的内容将这些单词打散，以便它们在到达容器的右端时继续下一行，但我不是 100% 满意，因为我希望 words/sentences 也应该最好在 spaces 上被打破。长词应从下一行开始，然后被分解，而不是与其他文本在同一行开始（在 space 之后），然后继续（但被分解）。
下面是一些示例，希望能说明我的意思：
<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/
我的 desire/expectation 是文本会在单词 "I am a very long Text" 之后中断，然后在下一行继续 "andIevenContain..." 并且这个长单词然后可以在结尾中断可用 space，基于父容器的限制。这在我使用 "hyphens: auto;" 时也不起作用。这甚至可以做到吗？
如果长词量不是太大，我建议不要使用任何word-break设置，而是将"soft hyphens"插入这些长词，位于语法正确的位置。
软连字符是一个看起来像这样的实体：­。因此，如果您有例如 whateverwonderfullongword，您可以将其更改为 what­ever­wonder­ful­long­word。如果它适合宽度，它将被写成一个整体，如果不是，如果不是，它将在 ­ 实体的最新可能位置处中断（用连字符），如下例所示。
<p>what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word what­ever­wonder­ful­long­word</p>
您可以将分词 属性 设置为分词。我已经更新了您的代码并创建了一个新的 fiddle。我认为它会解决你的问题
Check it outhttps://jsfiddle.net/yvLb6zer/