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

标签：alt   baseline   vertica   其他   lock   ext   float   mic   hidden   

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

首先把文字设为：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后引起的垂直对齐问题

标签：alt   baseline   vertica   其他   lock   ext   float   mic   hidden   

原文地址：https://www.cnblogs.com/jane2160/p/11590598.html