Html 文本未在按钮内断开

因此，我有以下代码：

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

这里有一些很长的文字，这里有一些很长的文字，这里有一些很长的文字

正如您将在上看到的，无论我在最后一个

的

style

属性中添加了什么，显示都不是我所期望的。我试过很多方法，比如

宽度：100%

，

分词：全部分词

，

分词：分词

，等等

我想我已经发现它与

标签上的

btn

类有关（当我删除它时，按钮内的文本的行为与我预期的一样，但我找不到哪个CSS属性是不是

btn

强制执行该行为

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

---

谢谢

添加

空白：正常；

   .btn {
        white-space: normal;
    }

---

问题是

.btn

有

空白：nowrap；

（默认为引导）

---

因此，您只需要使用具有

空白：normal；

使用

空白属性的规则来覆盖它

    <div style="text-align:left; width:100%; white-space: normal;">
       <p>Here is some very long text on purpose here is some very long text on purpose here is some very long text on purpose </p>
    </div>


这里有一些很长的文字，这里有一些很长的文字，这里有一些很长的文字