目前有这样的需求，一行标题中，前面为图标，后面是文字，文字要实现一行省略的效果
首先把文字设为：display: inline-block;
然后设置省略： overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis;
这时我们会发现，文字省略实现了，但是文字和图标不对齐了，如下
这是因为行内元素默认的是基线对齐vertical-align: baseline，设置overflow: hidden后会使它的基线变为下边缘，而其他元素为了对齐，就会向下偏移
解决方案：
1. 设置文字vertical-align: top
2. 给一行中的其他元素也设置overflow: hidden
3. 设置元素float
关于文本设置overflow：hidden后引起的垂直对齐问题
原文：https://www.cnblogs.com/jane2160/p/11590598.html