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），就能够回到同一基线上。实现对齐。
参考文章:
CSS 中 vertical-align 的默认值 baseline 的了解