Twitter Bootstrap Button Text Word Wrap
For the life of me I am unable to get these twitter bootstrap buttons to text wrap onto multiple lines, they appearing like so.
I cannot post images, so this is what it is doing...
[This is the bu] tton text
I would like it to appear like
[This is the ]
[button text ]
<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>
Any help would be much appreciated.
Edit. I have tried adding word-wrap:break-word; but it is not making any difference.
Edit. JSFiddle http://jsfiddle.net/TTKtb/ - You will need it expand the right column so the panels sit next to one another.
Try this: add white-space: normal; to the style definition of the Bootstrap Button or you can replace the code you displayed with the one below
<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>
I have updated your fiddle here to show how it comes out.
你可以简单地添加这个类。
.btn{
white-space:normal !important;
word-wrap: break-word;
}