inline-block元素设置overflow:hidden 导致相邻行内元素向下偏移的之坑

场景复现：

一次开发中，出现了这种类似需求。看到设计稿后，巴拉巴拉写好了，发现问题来了：

<span>
     <i class="iconfont icon-none c-9 fz16"></i>
       未找到"
</span>
<span class="keyValue">{{value}}</span>
<span>"相关结果</span>
   <!--css代码-->
 .keyValue {
                display: inline-block;
                max-width: 100px;
                color:#2066FF ;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

            }

明显这个不是我所想要的结果，查了资料发现。两个span会向下偏移一定距离
实际上就是inline-block元素的默认baseline和其下外边沿的距离解决方法也很简单，只要在inline-block元素中加vertical-align: bottom，即可解决问题。