196

对于我的生活，我无法让这些 twitter 引导按钮将文本换行到多行，它们看起来像这样。

我不能发布图片，所以这就是它正在做的事情......

[This is the bu] 文本

我希望它看起来像

[这是]

[按钮文字]

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

任何帮助将非常感激。

编辑。我尝试添加word-wrap:break-word;，但没有任何区别。

编辑。JSFiddle http://jsfiddle.net/TTKtb/ - 您将需要它展开右列，以便面板彼此相邻。

4

4 回答 4

374

试试这个：添加空格：正常；到 Bootstrap Button 的样式定义，或者您可以将显示的代码替换为下面的代码

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

我在这里更新了你的小提琴以展示它是如何出现的。

于 2013-09-25T04:34:51.193 回答
71

您可以简单地添加此类。

.btn {
    white-space:normal !important;
    word-wrap: break-word; 
}
于 2015-01-05T04:31:11.363 回答
5

FWIW，在 Boostrap 4.4 中，您可以.text-wrap为按钮之类的东西添加样式：

   <a href="#" class="btn btn-primary text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>

https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow

于 2020-04-22T16:40:52.343 回答
1

您可以添加这些样式，它可以按预期工作。

.btn {
    white-space:normal !important; 
    word-wrap: break-word; 
    word-break: normal;
}
于 2018-05-28T05:43:17.840 回答