Twitter的引导button文本的文字包装

对于我的生活,我无法得到这些twitter引导button文本换行到多行,他们出现像这样。

我无法发布图片,所以这是它在做什么…

[这是butonton文本

我希望看起来像

[这是]

[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;">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/ – 您将需要它扩展右列以便面板坐在一起。

试试这个:添加空格:正常; 到引导button的样式定义,或者您可以用下面的代码replace您显示的代码

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

我已经在这里更新你的小提琴,以显示它是如何出来的。

你可以简单地添加这个类。

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