title: Bootstrap Panel-Title: Having a title text with ellipsis and buttons on right side
body: <p>If the text is (too) long, the button is shifted down.
  I would like to have: </p>
  
  <ul>
  <li>the buttons still on the right side and always on the same top-level</li>
  <li>the text be shortened (ellipsis) right before the button</li>
  </ul>
  
  <p>Is this possible?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-heading h3 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;
  With short text it works great!
              &lt;button class="btn btn-default pull-right"&gt;
                  New
              &lt;/button&gt;
          &lt;/h3&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          Panel content
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;
  But with long text, the button is lower: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
              &lt;button class="btn btn-default pull-right"&gt;
                  New
              &lt;/button&gt;
          &lt;/h3&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          Panel content
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>