关于文本设置overflow：hidden后引起的垂直对齐问题

本文转载自：https://blog.csdn.net/weixin_30877181/article/details/101731141

实现图片中红框左右两部分文本垂直对齐

目前有这样的需求，一行标题中，前面为图标，后面是文字，文字要实现一行省略的效果。

首先把文字设为：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