文本溢出省略号显示时，水平位置发生偏移

问题

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

这个很简单啊

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

但是 会出现这样的问题

[demo](https://jsfiddle.net/mayufo/x7e8s36v/3/）

竟然没有对齐！！！

解决

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将被强制修改为元素下外边沿。

参考

Why does this inline-block element have content that is not vertically aligned

转载于:https://www.cnblogs.com/mayufo/p/5758104.html