title: Bootstrap dropdown: how to make text wrap nicely
body: <p>I am learning Bootstrap. I would like to have a button with dropdown such as the following:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
    &lt;a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#"&gt;
      Action
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;div class="dropdown-menu" style="width: 300px;"&gt;
      &lt;div &gt;
  
    Long text goes here.
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Instead of dropdown menu, I have <code>&lt;div&gt;</code> with long text and other html tags. The problem is that I tried different CSS rules and the long text either extends beyond the <code>&lt;div&gt;</code> or causes scroll bars to show up. I just want the long text wrap nicely within the <code>&lt;div&gt;</code> and goes down depending on the amount of text.</p>
  
  <p>How can I do this?</p>
  
  <p>Am I using "dropdown-menu" component the wrong way?</p>