У меня есть какой-то меньший боковой контейнер, #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;
}
Fiddle: https://jsfiddle.net/qp74uxkt/11/
Мое желание / ожидание состояло в том, что текст будет разрываться после слов "Я очень длинный текст ", затем на следующей строке продолжите с" andIevenContain ... ", и это длинное слово может быть разбито в конце доступного пространства, основываясь на ограничениях родительского контейнера.Это также не работает, когда я использую "дефисы: авто;".Можно ли это сделать?