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:

  

        

                      

              相关标签:
       
      

Answer 1

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

Example fiddle

Answer 2

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!

Answer 3

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 4

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

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

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)