overflow:hidden这是一个常用的css属性。在工作过程中遇到了如下问题：制作一个信息显示标签，如下图，一个标签包含一个图标和一段文字。现在需求是：当分支标签的文字过长时，用省略号代替显示，所以设置分支标签的div元素：overflow:hidden；最大宽度：170px；文本溢出：省略号；空白：nowrap；try标签宽度超过170px时，显示省略号。却出现了下面的画面：这是维森？？？？查阅资料后。原来，我为标签容器的div设置了display:inline-block，以便并排显示标签。当overflow:hidden和display:inline-block一起使用时，基线会移动，所以高度会不同。当inline-block元素的显示不可见时，它的基线是margin-box的下边界（下图中左边的元素），而右边的元素没有设置overflow:hidden，它的基线是文本内容的基线。基线对齐后，就有这样的高度差。通过将两个标签的vertical-align设置为bottom（只要vertical的值不是baseline），就可以回到相同的baseline。实现对齐。参考文章：理解CSS中vertical-align的默认值基线
