overflow:hidden
这是大家常用的css属性。在工作过程中，遇到下列问题：
制作一个信息显示标签，如下图所示，一个标签包含一个icon和一段文字。
现在需求是：分支标签的文字过长时用省略号代替显示，于是给这个分支标签的div元素设置了：
overflow: hidden;
max-width: 170px;
text-overflow: ellipsis;
white-space: nowrap;试图让标签宽度超过170px时，显示省略号。但是却出现了下图的情况：
这是为森呢？？？？
经过查阅资料。发现原来是我为了让标签并列显示，给标签容器的div设置了display：inline-block。而overflow：hidden和display: inline-block一起使用时会造成baseline的移动，所以高度就变得不一样了。
当inline-block元素的display不为visible的时候，其baseline为margin-box的下边界（如下图左侧元素），而右边的元素没有设置overflow:hidden,他的baseline为文字内容的基线。baseline对齐之后则出现了这样的高度差。
通过设置两个标签的vertical-align为bottom（只要vertical的值不为baseline），就可以回到同一基线上。实现对齐。
