title: using inline-block to truncate text in span breaks UI
body: <p>I want to truncate the text and the alignment of the elements must be kept. And to truncate text in span, <code>display: inline-block</code> must be used. But using it breaks the UI.</p>
  
  <p><a href="http://jsfiddle.net/iamdevlinph/9wdmnLv5/" rel="nofollow noreferrer">JSFiddle Demo</a></p>
  
  <p>Code Snippets</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="#"&gt;
  &lt;i class="fa fa-circle bordered"&gt;&lt;/i&gt;
  &lt;span class="bordered inline"&gt;{{text}}&lt;/span&gt;
  &lt;i class="fa fa-times bordered"&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.inline {
    max-width: 137px !important;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
  }
  </code></pre>
  
  <p>Expected Output is to have the truncated text be aligned with the surrounding <code>&lt;i&gt;&lt;/i&gt;</code> tags.</p>