block向上移动文本

block向上移动文本

本文介绍了overflow:hidden + display:inline-block向上移动文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下HTML:

<div>
    a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>

我期望看到: abc

我在Chrome,Safari,Firefox中看到的内容:

What I see (in Chrome, Safari, Firefox):

b 高于 a c

推荐答案

发生这种情况是因为 inline-block 元素的高度等于其父元素,并且 overflow:hidden 导致其底边在父元素的文本基线上对齐。因此,对于< span> ()。

This happens because the inline-block element has height equal to its parent and overflow: hidden causes its bottom edge to be aligned on the text baseline of the parent. As a result the space that is available for descenders on the text is essentially doubled for the <span> (JSFiddle).

你可以通过给它修改它 vertical-align:bottom

You can fix this by also giving it vertical-align: bottom.

这篇关于overflow:hidden + display:inline-block向上移动文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 00:24