Why does overflow-x:hidden clip my descenders?

Question

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/

In that demo, I expect to see "jjjjj", but instead the j's are cut off and look more like 1's.

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?

Answer 1

I found some answers in a previous question. According to the specs:

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.

Furthermore, on this page the author mentions that many browsers impose additional restrictions:

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’).

That same page also provides demos for all possible combinations where this effect can be observed.

I am not aware of a viable workaround for my situation.

EDIT

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.

Answer 2

It seems changing the H1 element into an inline element will get you the desired results:

h1 {
    margin: 10px;
    padding: 0;        
    overflow-x: hidden;
    overflow-y: visible;
    line-height: 0.5em;
    display:inline;
}

Just make sure the following element is a block element so it doesn't start in the same line. That or use the correct line-height and then use negative margins. After all, I can only guess what you're trying to do... Good luck!