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