为什么overflow-x:隐藏剪辑我的下降器？

Question

我希望有一个标题元素overflow-x:hidden和overflow-y:visible.但是,出于某种原因,overflow-y似乎没有遵守该财产.你可以在这里观察(在Chrome和Firefox上测试):http: //jsfiddle.net/YgsAw/3/

在那个演示中,我希望看到"jjjjj",但是j被切断了,看起来更像是1.

如果我overflow-x:visible在h1标签上设置,则突然显示文本的整个高度,但设置overflow-x:hidden会使其剪裁.我希望这种行为overflow-y,但似乎没有效果.为什么会这样,我能做些什么呢？

Answer 1

我在前一个问题中找到了一些答案.根据规格:

计算的值overflow-x和overflow-y它们的指定值相同,除了某些组合visible是不可能的:如果指定了一个visible而另一个是scroll或auto,则visible设置为auto.计算值overflow等于overflow-xif 的计算值overflow-y相同; 否则它是对计算的值的overflow-x和overflow-y.

此外,在此页面上,作者提到许多浏览器都施加了额外的限制:

在Gecko,Safari,Opera中,'visible'在与'hidden'结合使用时变为'auto'(换句话说:'visible'与其他与'visible'不同的东西组合成'auto').

同一页面还提供了可以观察到这种效果的所有可能组合的演示.

我不知道我的情况可行的解决方法.

编辑

我非常确定我可以通过将标题标记嵌套在另一个标记中来做我想要的事情:<div><h1>title</h1></div>.内部h1必须line-height:normal使一切垂直可见,并overflow:hidden使其截断.外部元件可以具有严格限制的高度overflow:visible.这不是理想的,但它似乎是最好的选择.