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/

问题是当我添加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;
}

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

Answer 2

如果你改变这个：

.topRow div {
    display: inline-block;
}

对此：

.topRow div {
    float:left;
}

然后就如你所愿。

Answer 3

或者只是使用：

div {
  width: 100%;
  line-height: 1.2em;
  height: 3.6em;
  background-color: gainsboro;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}