css行级元素设置超出部分隐藏使用省略号代替，出现基线不对齐的解决方法

一、现象描述：

三个行元素同一行展示、其中两个行元素需要设置超出部分隐藏使用省略号替代的效果

二、实现方法

具体css实现代码如下：

width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;

三、引发问题

css的超出部分隐藏代码，会导致同一行元素内容，不对齐的现象，现象如下：

四、解决方法：

添加指定对齐方式代码：

vertical-align: bottom;

问题分析：overflow:hidden属性导致基线对齐方式不一致，添加vertical-align属性，指定基线对齐方式。