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/

问题是,当我添加overflow: hidden到div时,它会使文本跳起几个像素,并且与文本周围的其余文本不一致.

是什么导致这种垂直运动？无需手动将文本向下推(带position: relative; and top: 5px),如何干净地将文本对齐？

Answer 1

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

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

试试这个.http://jsfiddle.net/V79Hn/