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

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!