文本不会在按钮内中断

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>

正如您将在这个 bootply上看到的，无论我在stylelast的属性中放入什么，显示都不是我所期望的<div>。我试过很多东西，如width:100%，word-break: break-all，word-wrap: break-word，等。

我想我发现它与标签btn上的类有关<button>（当我删除它时，按钮内的文本表现得如我所愿，但我找不到哪个 CSS 属性btn正在强制这种行为......

显然，我希望文本在达到按钮内允许的最大宽度时会中断（我在引导中放了一个示例，说明显示应该是什么样子（或多或少））

谢谢

Answer 1

问题是.btn有white-space: nowrap;（默认情况下引导程序）

因此，您只需要使用具有white-space: normal;.

Answer 2

添加white-space: normal;

   .btn {
        white-space: normal;
    }