html - 文本不会在按钮内中断

Question

所以我有以下代码:

<div class="col-md-2">
 <div class="panel">
  <div class="btn-group-vertical btn-block">
   <button type="button" class="btn btn-default btn-lg">
    <div style=" SEE QUESTION ">
     Here is some very long text on purpose here is some very long text on purpose here is some very long text on purpose 
    </div>
   </button>
  </div>
 </div>
</div>

正如您将在 this bootply 上看到的那样，无论我在 style 中放入什么，显示都不像我预期的那样最后一个属性 <div> .我试过很多东西，比如 width:100% , word-break: break-all , word-wrap: break-word等

我想我发现它与 btn 有关在 <button> 上课标记(当我删除它时，按钮内的文本会按我预期的方式运行，但我找不到哪个 CSS 属性 btn 强制执行此行为...

显然，我希望文本在达到按钮内允许的最大宽度时中断(我在 bootply 中举了一个显示应该是什么样子的例子(或多或少))

谢谢

Answer 1

问题是 .btn 有 white-space: nowrap;(默认为 bootstrap)

所以您只需要用具有 white-space: normal; 的规则覆盖它。