Word-break is not working as expected

Question

I have a container which contains several divs. I want those divs to not overflow parent and break text content if it exeeds parent's limits. But it simply is not working: text is not breaking and thus markup is broken.

Here is sample markup:

<div id="container" data-toggle="buttons">
    <div id="longDiv" class="btn btn-primary btn-xs"><input name="extensionsToMove" value="9099" type="checkbox">  123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345</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 tried overflow-wrap, word-wrap, word-break and all them alltogether - they are just do nothing.

Here is JSFiddle sample: https://jsfiddle.net/zdtpcps5/

Is it intended to work with english words only?

Answer 1

The bootstrap .btn class sets white-space: nowrap to this div.

So, simply override it with white-space: normal in your #longDiv.

jsFiddle