html - 断字没有按预期工作

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。

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

jsFiddle