CSS overflow hidden causing text alignment problems

Question

I have some pretty simple markup and I want long text to be truncated with "..."

.topRow div {
  display: inline-block;
}

#name {
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="topRow">
  <div id="edit">
    <div id="pre">Before -</div>
    <div id="name">Some long text that should get truncated when it passes the max width</div>                    
    <div id="post">- After</div>
  </div>
</div>

Fiddle : http://jsfiddle.net/xyPrv/3/

The problem is that when I add overflow: hidden to the div, it makes the text jump up a few pixels and is out of alignment with the rest of the text around it.

What is causing this vertical movement? Without manually pushing the text back down (with position: relative; and top: 5px), how can I cleanly get the text to be aligned?

Answer 1

Try this:

.topRow div {
    display: inline-block;
    vertical-align:middle;
}

#name {
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="topRow">
       <div id="edit">
              <div id="pre">Before -</div>
              <div id="name">Some long text that should get truncated when it passes the max width</div>                    
              <div id="post">- After</div>
       </div>
 </div>     

http://jsfiddle.net/V79Hn/