为什么overflow-x:隐藏剪贴我的下降? [英] Why does overflow-x:hidden clip my descenders?
问题描述
我想有一个title元素 overflow-x:hidden
和 overflow-y:visible
。但是,由于某种原因, overflow-y
属性似乎没有遵守。您可以在这里观察(在Chrome和Firefox上测试):
http://jsfiddle.net/YgsAw/3/
I would like to have a title element with overflow-x:hidden
and overflow-y:visible
. However, for some reason the overflow-y
property does not seem to be obeyed. You can observe this here (tested on Chrome and Firefox):
http://jsfiddle.net/YgsAw/3/
在这个演示中,我希望看到jjjjj,而是j被剪掉,看起来更像1。
In that demo, I expect to see "jjjjj", but instead the j's are cut off and look more like 1's.
如果我在 h1
标签上设置 overflow-x:visible
的文本是可见的,但是设置 overflow-x:hidden
会使其被裁剪。我会期望这种行为从 overflow-y
,但似乎没有效果。
If I set overflow-x:visible
on the h1
tag then suddenly the full height of the text is visible, but setting overflow-x:hidden
makes it clipped. I would expect this behavior from overflow-y
, but that seems to have no effect. Why is this, and what can I do about it?
推荐答案
我在。//st。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。根据规格:
overflow-x
和overflow-y
的计算值是除了与visible
的一些组合是不可能的:如果一个指定为visible
和其他是scroll
或auto
,则visible
auto
。overflow
的计算值等于overflow-x
的计算值ifoverflow- y
是相同的;否则是overflow-x
和overflow-y
的一对计算值。
The computed values of
overflow-x
andoverflow-y
are the same as their specified values, except that some combinations withvisible
are not possible: if one is specified asvisible
and the other isscroll
orauto
, thenvisible
is set toauto
. The computed value ofoverflow
is equal to the computed value ofoverflow-x
ifoverflow-y
is the same; otherwise it is the pair of computed values ofoverflow-x
andoverflow-y
.
Furthermore, on this page the author mentions that many browsers impose additional restrictions:
在Gecko,Safari,Opera中,visible结合隐藏(换句话说:当与任何不同于可见的东西组合时,可见变为自动)。
In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’).
我不知道一个可行的解决方案,我的情况。
I am not aware of a viable workaround for my situation.
EDIT
我确定我可以通过嵌套我的标题标签在另一个标签中:< div>< h1> title< / h1>< / div>
。内部 h1
具有 line-height:normal
,使一切垂直可见,以及 overflow:hidden
使它截断。外部元素可以具有严格限制的高度,并且 overflow:visible
。这不是理想的,但它似乎是最好的选择。
I'm pretty sure I can do what I want by nesting my title tag in another tag: <div><h1>title</h1></div>
. The inner h1
has line-height:normal
to make everything vertically visible, as well as overflow:hidden
to make it truncate. The outer element can have a strictly limited height and overflow:visible
. It's not ideal, but it seems like the best option.
这篇关于为什么overflow-x:隐藏剪贴我的下降?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!