Question

对于我的生活，我无法将这些Twitter引导按钮文本换行到多行，它们就像这样出现。

我无法发布图片，所以这就是它正在做的......

[这是bu] tton文本

我希望它看起来像

[这是]

[按钮文字]

<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/ - 你需要它扩展右栏，使面板彼此相邻。

Answer 1

尝试此操作：将 white-space：normal; 添加到Bootstrap按钮的样式定义中，或者您可以将显示的代码替换为下面的代码

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

我已更新你的小提琴here以显示它是如何出现的。

Answer 2

您只需添加此课程即可。

.btn {
    white-space:normal !important;
    word-wrap: break-word; 
}

Answer 3

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

Answer 4

您可以添加这些样式，它可以正常工作。

<a 
    href="#" 
    class="btn btn-primary btn-xs col-lg-12" 
    style="white-space:normal !important; word-wrap: break-word; word-break: normal;"
>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>

Twitter Bootstrap按钮文本Word Wrap

4 个答案: