CSS溢出隐藏导致文本对齐问题-CSSoverflowhiddencausingtextalignmentproblems

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;
}

  

    
Before -
    
Some long text that should get truncated when it passes the max width
                    
    
- After
  

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

小提琴: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.

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

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?

是什么导致这种垂直运动?无需手动将文本向下推(位置:相对;顶部:5px),如何干净地将文本对齐?

2 个解决方案

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

.topRow div {
    display: inline-block;
}

.topRow div {
    float:left;
}