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的{{1}}属性中，显示都不如我所期望的那样。我尝试了许多内容，例如<div>，width:100%，word-break: break-all等。

我想我发现它与word-wrap: break-word标签上的btn类有关（当我删除它时，按钮内的文字表现得像我期望的那样，但我不能找到哪个CSS属性<button>强制行为......

显然，我希望文本在达到按钮内允许的最大宽度时会中断（我在显示器应该看起来像（或多或少）的bootply中放置一个例子）

由于

Answer 1

添加white-space: normal;

   .btn {
        white-space: normal;
    }

Answer 2

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

因此，您只需要使用包含white-space: normal;。

的规则覆盖该内容

Answer 3

使用white-space属性

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

文本没有在按钮内打破

3 个答案: