本文介绍了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向上移动文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!