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?

Answer 1

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

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

Answer 2

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

Answer 3

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.

CSS

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

Hope this helps!

Answer 4

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

Example fiddle

Answer 5

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)