为什么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 的计算值if overflow- y 是相同的;否则是 overflow-x 和 overflow-y 的一对计算值。

The computed values of overflow-x and overflow-y are the same as their specified values, except that some combinations with visible are not possible: if one is specified as visible and the other is scroll or auto, then visible is set to auto. The computed value of overflow is equal to the computed value of overflow-x if overflow-y is the same; otherwise it is the pair of computed values of overflow-x and overflow-y.

此外，在此页< a>作者提到许多浏览器都施加了额外的限制：

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屋！