title: Can "text-overflow: ellipsis" be made to work on the "navbar-brand" text of a Bootstrap 3 navbar?
body: <p>I'd like to use <code>text-overflow: ellipsis</code> on the <code>.navbar-brand</code> text of a Bootstrap 3 navbar so that on devices like an iPhone the text is truncated rather than the navbar growing in vertical size.</p>
  
  <p>I have two buttons as well:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;button type="button" class="btn btn-default navbar-btn navbar-left"&gt;Back&lt;/button&gt;
    &lt;a class="navbar-brand" href="#" &gt;Branding text that can sometimes be too wide&lt;/a&gt;
    &lt;button type="button" class="btn btn-default navbar-btn navbar-right"&gt;Logout&lt;/button&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The <code>text-overflow: ellipsis</code> works (with <code>white-space: nowrap</code> and <code>overflow: hidden</code> also set) if I hard-code the width of the <code>.navbar-brand</code> but I am looking for a way to accomplish this so that the maximum available space is used automatically.</p>
  
  <p><strong>P.S.</strong></p>
  
  <p>The CSS that works when added to the <code>.navbar-brand</code> when a width is hard coded:</p>
  
  <pre><code>.ellipsis {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
  }
  </code></pre>