Bootstrap dropdown: how to make text wrap nicely

Question

I am learning Bootstrap. I would like to have a button with dropdown such as the following:

<div class="btn-group">
  <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <div class="dropdown-menu" style="width: 300px;">
    <div >

  Long text goes here.

    </div>
  </div>
</div>

Instead of dropdown menu, I have <div> with long text and other html tags. The problem is that I tried different CSS rules and the long text either extends beyond the <div> or causes scroll bars to show up. I just want the long text wrap nicely within the <div> and goes down depending on the amount of text.

How can I do this?

Am I using "dropdown-menu" component the wrong way?

score 38 · Accepted Answer · answered Jul 26 '13 at 17:30

38

Just add white-space: normal; to your .dropdown-menu

Example fiddle

answered Jul 26 '13 at 17:30

omma2289

54,161
8
64
68

Thanks dude that works. it's been half day battling with word-break:break-all – teenage vampire Nov 30 '20 at 09:31
Thanks. It worked. Just a note, it has to go within the anchor tag class. – Ron B Nov 08 '21 at 10:07

score 17 · Answer 2 · answered Dec 09 '15 at 01:01

17

Adding white-space normal to the anchor tag within .dropdown-menu worked for me, adding it just to .dropdown-menu didn't work.

.navbar .nav li .dropdown-menu li a {white-space: normal;}

answered Dec 09 '15 at 01:01

createscape

713
7
20

This worked for me too, I believe maybe because of the markup from the original question? I don't know, but thanks ! – Leo Apr 11 '17 at 07:53
for use in a vertical menu... .nav-tabs .dropdown-menu li a {white-space: normal;} – trf Jun 08 '17 at 21:25

score 5 · Answer 3 · edited Aug 20 '18 at 12:25

5

you can add this class to your dropdown items. This will wrap text when necessary.

.dropdown-item {
  white-space: pre-wrap;
}

edited Aug 20 '18 at 12:25

bhansa

7,282
3
30
55

answered May 24 '18 at 05:46

Ali Seivani

496
3
21

David Taiaroa · Answer 4 · 2020-07-08T20:56:58.030

Is this close to what you are after?
http://www.bootply.com/69776

You will see I've changed the HTML slightly and added a CSS class to limit the width of the dropdown. The HTML is taken directly from the bootstrap site with a couple of extra classes for the button.

HTML

<div class="dropdown">
<a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#"> Action
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
  non nulla eu dui imperdiet eleifend in vel ligula. Ut tempor gravida 
  leo. Sed in tellus justo. Nam vel nisl nulla. Proin sagittis semper 
  nunc et vehicula. Proin quam lacus, feugiat quis diam in, malesuada 
  posuere odio. Integer pharetra sed ante eget posuere. Nullam a 
  dapibus leo, vitae gravida ligula. Praesent consectetur lorem et 
  pellentesque imperdiet. Suspendisse vitae libero auctor, pharetra 
  nunc eu, laoreet dui. Fusce posuere risus risus, id ultricies lectus 
  aliquet et. Nullam eget orci et mauris lacinia sollicitudin non vel 
  felis. Praesent eleifend risus et libero ultrices facilisis.
</ul>
</div>

CSS

 .dropdown-menu{
 max-width:300px;
 }

Hope this helps!

Anupam · Answer 5 · 2019-07-17T12:54:47.810

Not exactly answering OP's questions but worth it since this is the well-ranked post on Google to wrap text for dropdowns. Anyone looking for a quick solution that just makes thing look nice and the dropdown not appearing out of order, can just add a width (as mentioned in this SO Answer):

<select id="something" class="bootstrap-select" style="width: 200px;">

This fixes the width of the <select> (or whatever element being used for the dropdown)

(Please note that the items in the dropdown will still not wrap but the whole thing looks more orderly since the dropdown is not going out of order. Also, the width may need to be adjusted accordingly for mobile screens)

Bootstrap dropdown: how to make text wrap nicely

5 Answers5

Linked