目前有这样的需求,一行标题中,前面为图标,后面是文字,文字要实现一行省略的效果
首先把文字设为: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