Twitter Bootstrap Button Text Word Wrap

Question

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.

Why don't you insert `
` where you want to insert line break? — ntalbs, Sep 25 '13 at 04:37
Not viable as the contents of the buttons will vary as loaded from a database. — M_Becker, Sep 25 '13 at 04:39
If you insert a
at the point you want your text to wrap you get a line break and the text wraps. I know this is not a solution when you have a lot of text but when you have three or four words that you want to wrap this might help ! — pebox11, Sep 17 '15 at 21:25

score 376 · Accepted Answer · answered Sep 25 '13 at 04:34

376

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.

answered Sep 25 '13 at 04:34

Brian Kinyua

4,456
1
18
17

Ahh, wow. Just looked it up. Didn't even know that CSS code existed. Thanks for your help! Spent hours trying to work this one out. – M_Becker Sep 25 '13 at 04:38
4

@user2063032 I think this guy can best explain white-space [link](http://www.impressivewebs.com/css-white-space/). – Brian Kinyua Sep 25 '13 at 04:42
No worries, I learn something each day from stackoverflow. Also you'll notice that the white-space property works well if the element i.e. the button is of a specified width. – Brian Kinyua Sep 25 '13 at 04:44
I am having this issue but with the panel title, how it an be fixed?? ideas – victor sosa Jul 03 '15 at 11:05
@victorsosa Kindly provide a fiddle with the code in question plus specify the element you're trying to manipulate – Brian Kinyua Jul 03 '15 at 12:04

Getsomepeaches · Answer 2 · 2019-04-09T00:31:37.730

74

You can simply add this class.

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

edited Apr 09 '19 at 00:31

answered Jan 05 '15 at 04:31

Getsomepeaches

1,041
1
10
17

7

i also needed ```word-break: normal``` to override the value set by bootstrap. But then it worked a charm! – crowmagnumb May 12 '15 at 17:41

score 6 · Answer 3 · answered Apr 22 '20 at 16:40

FWIW, in Boostrap 4.4, you can add .text-wrap style to things like buttons:

   <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

chickens · Answer 4 · 2020-02-05T15:42:44.080

2

You can add these style's and it works just as expected.

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

edited Feb 05 '20 at 15:42

answered May 28 '18 at 05:43

chickens

19,976
6
58
55

Using inline styles would only allow you to fix this for that one button. Add it to a class so you can use it throughout your project. Using a col definition in a class on an anchor would be seen as bad practice whilst using Bootstrap. – Getsomepeaches Apr 09 '19 at 00:32

Twitter Bootstrap Button Text Word Wrap

4 Answers4

Linked