I am facing an issue with a container that holds multiple divs. I am attempting to prevent the contents of these divs from overflowing their parent element and breaking the text if it exceeds the parent's boundaries. However, my efforts are unsuccessful as the text is not breaking, resulting in broken markup.
Below is a sample of the markup:
<div id="container" data-toggle="buttons">
<div id="longDiv" class="btn btn-primary btn-xs"><input name="extensionsToMove" value="9099" type="checkbox"> 1234567890123456789012345678901234567[...]3456</div>
<div class="btn btn-primary btn-xs"><input name="extensionsToMove" value="9000" type="checkbox"> config</div>
<div class="btn btn-primary btn-xs"><input name="extensionsToMove" value="9032" type="checkbox"> unk28</div>
</div>
I have tried using overflow-wrap, word-wrap, word-break, and combining them all - however, none of them seem to be effective.
For reference, here is a JSFiddle example: https://jsfiddle.net/zdtpcps5/
I am curious if this functionality is designed to work only with English words?