问题

经常有这样的需求，给一个定宽的div.但是里面放的内容有时候会超长，这时候就有需求，要求剩下的省略号显示啊！

这个很简单啊

width: 100px;  // 这个div宽度的定值 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

但是 会出现这样的问题

[demo](）

竟然没有对齐！！！

解决

1 给左边上浮的div 加 vertical-align: top;

2 给右边的下沉的div 加 vertical-align: top;

原因分析

参考w3c 规范

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

大概意思说 当一个inline-block元素被设置overflow非visible属性值后，其baseline将被强制修改为元素下外边沿。

参考