目前有这样的需求，一行标题中，前面为图标，后面是文字，文字要实现一行省略的效果
首先把文字设为：display: inline-block;
然后设置省略： overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis;
这时我们会发现，文字省略实现了，但是文字和图标不对齐了，如下
这是因为行内元素默认的是基线对齐vertical-align: baseline，设置overflow: hidden后会使它的基线变为下边缘，而其他元素为了对齐，就会向下偏移
解决方案：
方案一： 设置文字vertical-align: top
方案二：给一行中的其他元素也设置overflow: hidden
方案三：设置元素float
