html - CSS オーバーフローが非表示になり、テキストの配置の問題が発生する

Question

非常に単純なマークアップがあり、長いテキストを「...」で切り捨てたい

.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>

フィドル: http://jsfiddle.net/xyPrv/3/

問題は、div に追加overflow: hiddenすると、テキストが数ピクセル飛び出し、周囲の残りのテキストとずれてしまうことです。

この垂直移動の原因は何ですか? 手動でテキストを下に押し戻さずに ( を使用してposition: relative; and top: 5px)、テキストをきれいに揃えるにはどうすればよいですか?