title: css overflow:hidden with display:inline-block
body: <p>I want to use text-overflow: ellipsis to cut some text when it is too long,but I have some problems when I use overflow:hidden with display:inline-block.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;span class="text"&gt;
      &lt;span class="inner left"&gt;Click to add overflow&lt;/span&gt;
      &lt;span class="inner right"&gt; long text here&lt;/span&gt;
  &lt;/span&gt;
  &lt;div class="bottom"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.text {
      line-height: 50px;
      font-size: 20px;
      display: inline-block;
  }
  .right {
      display:inline-block;
      text-overflow: ellipsis;
      width: 100px;
      white-space: nowrap;
  }
  .overflow {
      overflow: hidden;
  }
  </code></pre>
  
  <p>javascript: </p>
  
  <pre><code>$('.text').on('click', function() {
      $(this).toggleClass('overflow');
      $('.right').toggleClass('overflow');
  })
  </code></pre>
  
  <p><strong>jsfiddle:</strong> <a href="http://jsfiddle.net/zhouxiaoping/knw7m5k2/2/" rel="nofollow noreferrer">http://jsfiddle.net/zhouxiaoping/knw7m5k2/2/</a></p>
  
  <p><strong>My question is :</strong></p>
  
  <ul>
  <li><p>why there is 2px blank between .text element and .bottom element when the .text has overflow:hidden attribute</p></li>
  <li><p>why the .right elment not align with the left when it has overflow:hidden attribute</p></li>
  <li>what dose the overflow:hidden really do</li>
  </ul>
  
  <p>my question is not how to fix it but figure out what happened</p>
  
  <p>related:<a href="https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward/9289377#9289377">Why is this inline-block element pushed downward?</a></p>
  
  <p>the really reason is :</p>
  
  <blockquote>
    <p>The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.</p>
  </blockquote>
  
  <p>thank you for the help of all</p>