断字不按预期工作

Question

我有一个包含几个div的容器。我希望这些div不会溢出父级和破坏文本内容，如果它符合父级的限制。但它根本不起作用：文本没有破坏，因此标记被破坏。

以下是示例标记：

<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>

我尝试了overflow-wrap，word-wrap，word-break以及所有这些 - 他们只是无所事事。

这是JSFiddle示例：https://jsfiddle.net/zdtpcps5/

它是否仅适用于英语单词？

Answer 1

bootstrap .btn类将white-space: nowrap设置为此div。

因此，只需在white-space: normal中使用#longDiv覆盖它。

jsFiddle