文本超出...显示，文本却无法对齐问题

现有问题

文本超出做...处理，之后却和其他的文本无法对齐了

  
  
  


123
今天是七夕节呀啦啦啦哈哈哈

http://js.jirengu.com/lozufaduyu/1/edit?html,css,output

问题分析

去掉overflow:hidden属性之后发现就可以对齐，查了资料发现，inline-block加上overflow:hidden,就会默认vertical-align:baseline，基线对齐

解决方案

只需设置vertical-align:top或者bottom可解决

div{
    display:inline-block;
    width:150px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    vertical-align:top
  }