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

时间:2021-12-15 12:07:27

问题

经常有这样的需求,给一个定宽的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